微信小程序 input输入框详解及简单实例

微信小程序 input输入框详解及简单实例

微信小程序输入框input

相关文章：

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input

微信小程序 form

微信小程序 checkbox

实现效果图：

微信小程序输入框input

属性名

类型

默认值

说明

value

String

输入框的内容

type

String

text

input的类型，有效值：text,number,idcard,digit,time,date

password

Boolean

false

是否是密码类型

placeholder

String

输入框为空时占位符

placeholder-style

String

指定placeholder的样式

placeholder-class

String

input-placeholder

指定placeholder的样式类

disabled

Boolean

false

是否禁用

maxlength

Number

140

最大输入长度，设置为0的时候不限制最大长度

auto-focus

Boolean

false

自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性

focus

Boolean

false

使得input获取焦点

bindchange

EventHandle

输入框失去焦点时，触发bindchange事件，event.detail={value:value}

bindinput

EventHandle

除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。

bindfocus

EventHandle

输入框聚焦时触发，event.detail = {value:value}

bindblur

EventHandle

输入框失去焦点时触发，event.detail = {value:value}

示例代码：

使得输入框获取焦点

你输入的是：{{inputValue}}

//input.js

Page({

data:{

focus:false,

inputValue:""

},

bindButtonTap:function(){

this.setData({

focus:Date.now()

})

},

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();

}

}

})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。