今天主要详写一下微信小程序中的Input输入框控件，今天小编就来好好的给大家讲解一下微信小程序input输入框示例，希望对广大微信用户有所帮助。之后将为大家带来更多微信小程序。

　　输入框在程序中是最常见的，登录，注册，获取搜索框中的内容等等都需要，同时，还需要设置不同样式的输入框，今天的代码中都要相应的使用。

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

　　首先，我是定义了他的id，这是我们最常用的，所以就配了一个id，毕竟不操作他，又为什么设成输入框呢， 第二，设置他的样式， 第三，设置他的输入类别，以上都是很简单的 第四。使用正则l;哎限定输入为纯数字。这点可能有点不理解，这是对他的keyup事件监听，将不是纯数字的list无视掉。注意，是对整个，不是经行筛选。 第五，限制他的输入最多6位数 第六输入事件监听。这是微信专属的，他的事件下面会给出 第七，设置当输入框为空的时候他的‘提示语';

　　代码如下：

　　用户名：

　　bindinput="userNameInput"/>

　　密 码：

　　bindinput="passWdInput" />

　　登录

　　清除

　　{{infoMess}}

　　{{userName}}

　　{{passWd}}

　　各类型输入框展示

　　//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

　　TextInput输入框展示

　　placeholder="自动聚焦弹出键盘，一个页面中只能有一个" auto-focus/>

　　你输入的是：{{inputValue}}

　　// 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.value

　　var pos = e.detail.cursor

　　if(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输入框示例相关信息，希望对大家有所帮助。之后将为大家带来更多的微信知识，微信新闻。更多精彩内容敬请关注微微风。

　　推荐阅读：

　　如何在小程序上实现卡券功能?

　　微信小程序计算器功能实现方法?

　　小程序如何实现留言功能?

上一篇：微信小程序里字体怎么加粗？如何添加外部字体？

下一篇: 班级微信公众号功能介绍怎么写?