微信小程序input输入框详解实例代码

微信小程序input输入框详解实例代码
这篇文章主要介绍了微信小程序 input输入框详解及简单实例的相关资料,需要的朋友可以参考下

这篇文章主要介绍了微信小程序 input输入框详解及简单实例的相关资料,需要的朋友可以参考下

实现效果图：

微信小程序输入框input

属性名类型默认值说明valueString 输入框的内容typeStringtextinput的类型，有效值：text,number,idcard,digit,time,datepasswordBooleanfalse是否是密码类型placeholderString 输入框为空时占位符placeholder-styleString 指定placeholder的样式placeholder-classStringinput-placeholder指定placeholder的样式类disabledBooleanfalse是否禁用maxlengthNumber140最大输入长度，设置为0的时候不限制最大长度auto-focusBooleanfalse自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性focusBooleanfalse使得input获取焦点bindchangeEventHandle 输入框失去焦点时，触发bindchange事件，event.detail={value:value}bindinputEventHandle 除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。bindfocusEventHandle 输入框聚焦时触发，event.detail = {value:value}bindblurEventHandle 输入框失去焦点时触发，event.detail = {value:value}

示例代码：

<!--input.wxml--><view> <input></view><view> <input> <view> <button>使得输入框获取焦点</button> </view></view><view> <input></view><view> <view>你输入的是：{{inputValue}}</view> <input></view><view> <input></view><view> <input></view><view> <input></view><view> <input></view><view> <input></view><view> <input></view><view> <input></view><view> <input></view>