微信小程序input控件

首先主页面中将登录的样式进行了简单展示和使用，代码如下：

<!--如果在同一个form表单中创建了多个input输入框，可以给给每个输入框，
创建自己的name=“userName”属性，可以区别哪个输入框，并通过添加
属性提交：bindsubmit="方法名" 重置：bindreset="方法名"，
达到清除输入框内容的目的
js文件中的用法，e.detail.value.userName.length-->
<view class="itemView">用户名：<input class="input" name="userName" placeholder="请输入用户名" bindinput="userNameInput"/></view>
<view class="itemView">密码：<input class="input" password placeholder="请输入密码"bindinput="passWdInput" /></view>
<view class="viewName" style="background-color:#fbf9fe"><button class="loginBtn" bindtap="loginBtnClick">登录</button><button class="resetBtn" bindtap="resetBtnClick">清除</button>
</view>
<view>{{infoMess}}</view>
<view>{{userName}}</view>
<view>{{passWd}}</view>
<view class="viewName" style="margin-top: 60px;"><navigator url="Component/TextInput/TextInput"><text class="view-Name">各类型输入框展示</text></navigator>
</view>

//index.js

//获取应用实例
var app = getApp()
Page({data: {infoMess: '',userName: '',userN:'',passWd: '',passW:''},//用户名和密码输入框事件userNameInput:function(e){this.setData({userN:e.detail.value})},passWdInput:function(e){this.setData({passW:e.detail.value})},//登录按钮点击事件，调用参数要用：this.data.参数；//设置参数值，要使用this.setData({}）方法loginBtnClick:function(){if(this.data.userN.length == 0 || this.data.passW.length == 0){this.setData({infoMess:'温馨提示：用户名和密码不能为空！',})}else{this.setData({infoMess:'',userName:'用户名：'+this.data.userN,passWd:'密码：'+this.data.passW})}},//重置按钮点击事件resetBtnClick:function(e){this.setData({infoMess: '',userName: '',userN:'',passWd: '',passW:'',})},onLoad: function () {console.log('onLoad')var that = this//调用应用实例的方法获取全局数据app.getUserInfo(function(userInfo){//更新数据that.setData({userInfo:userInfo})})}
})

然后在第二个界面中显示了不同的样式和功能的input

<view class="viewTitle"><text class="view-Name">TextInput输入框展示</text><view class="lineView"></view>
</view>
<view class="section"><input class="input" placeholder-style="font-size:15px" placeholder="自动聚焦弹出键盘，一个页面中只能有一个" auto-focus/>
</view>
<view class="section"><input class="input" placeholder="此处只有在点击下方按钮时才聚焦" focus="{{focus}}" />
</view>
<view class="section1"><button bindtap="bindButtonTap">使得输入框获取焦点</button>
</view>
<view class="section"><input class="input" maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section__title">你输入的是：{{inputValue}}</view>
<view class="section"><input class="input" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view class="section"><input class="input" bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view class="section"><input class="input" bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<view class="section"><input class="input" type="number" placeholder="这是一个数字输入框" />
</view>
<view class="section"><input class="input" password type="text" placeholder="这是一个密码输入框" />
</view>
<view class="section"><input class="input" type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view class="section"><input class="input" type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section"><input class="input" placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>

// pages/index/Component/TextInput/TextInput.js

Page({data: {focus: false,inputValue: ''},bindButtonTap: function() {this.setData({focus: true})},bindKeyInput: function(e) {this.setData({inputValue: e.detail.value})},bindReplaceInput: function(e) {var value = e.detail.valuevar pos = e.detail.cursorif(pos != -1){// 光标在中间var left = e.detail.value.slice(0,pos)// 计算光标的位置pos = left.replace(/11/g,'2').length}// 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置return {value: value.replace(/11/g,'2'),cursor: pos}// 或者直接返回字符串,光标在最后边// return value.replace(/11/g,'2'),},bindHideKeyboard: function(e) {if (e.detail.value === "123") {//收起键盘wx.hideKeyboard()}},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},onReady:function(){// 页面渲染完成},onShow:function(){// 页面显示},onHide:function(){// 页面隐藏},onUnload:function(){// 页面关闭}
})

效果图如下：

微信小程序input控件相关推荐

微信小程序地图控件Map的使用
本文介绍微信小程序map控件的使用 map为原生控件之一-- 介绍完map控件之后下面直接来看代码怎么实现吧和往常一样,这些代码贴过去就可以直接通用的首先wxml文件(极简): <map i ...
【delphi】开发微信小程序后台控件（一）（含源代码、演示程序、控件使用帮助）
1. 前言微信小程序已经非常普及,但是遗憾的是官方提供的 SDK 等没有Delphi语言的,这样使用Delphi语言开发微信小程序后台就相对比较困难,需要研究平台API,费时费力,特别是调试API很 ...
微信小程序视图控件与bindtap之间的问题的解决
在微信小程序中最常用的<view>控件可以用bindtap(冒泡反应) 如<view bindtap="ItemOnclick" data-mType=&qu ...
微信小程序text控件部分字体文字大小和颜色设置四
在我们android中有的时候会要求textview控件显示文字部分颜色不同而且大小也不同,这个在微信小程序中怎么做呢?因为在微信小程序中所有的显示都是通过标签来实现的,那么标签时可以嵌套的,比如显示 ...
【delphi】开发微信小程序后台控件（三）（含源代码、演示程序、控件使用帮助）
7. 微信小程序控件测试 7.1 设置参数选择[公共功能]-[编辑控件属性]菜单,设置相关参数并保存 7.2 双击绿色运行按键或者启动小程序功能菜单至此,小程序后台服务已经成功启动,可以在前端 ...
微信小程序view控件自动换行
使用场景:微信小程序.注册协议动态下发多个,需要view自动换行,同时点击跳转协议内容场景需求 1.效果图. 2.xml界面代码 <view cl ...
小程序背景图片从服务器获取,微信小程序button控件去边框、加背景图
button边框去除相信大家开发微信小程序时使用button会遇到一些与预期效果不同的样式问题.例如button的边框无法去除,在为button设置圆角的时候周围会有一些"杂质" ...
微信小程序按钮控件设置呈现效果
1.效果图在小程序中完成上述布局,需要设置四个按钮位置,控制每个按钮大小.设置按钮背景颜色,设置标题和图标的位置. 2.代码说明 2.1 index.wxml <view class=&quo ...
微信小程序view动态长度_微信小程序关于控件尺寸动态计算的问题
自定义相机界面,顶部80rpx,底部210rpx,中间剩余高度填充相机视频流view. 实现思路是获取屏幕高度,减去顶部80rpx再减去底部210rpx,结果赋值给相机视频流view的高度.这个高度需 ...

微信小程序input控件

微信小程序input控件相关推荐

最新文章

热门文章