微信小程序表单组件输入框 input

由 ?﹏???ζ???﹏﹏? 创建，youj 最后一次修改 2016-09-23 input输入框。属性名类型默认值说明最低版本valueString 输入框的初始内容 typeString"text"input 的类型 passwordBooleanfalse是否是密码类型 placeholderString 输入框为空时占位符 placeholder-styleString 指定 placeholder 的样式 placeholder-classString"input-placeholder"指定 placeholder 的样式类 disabledBooleanfalse是否禁用 maxlengthNumber140最大输入长度，设置为 -1 的时候不限制最大长度 cursor-spacingNumber0指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 auto-focusBooleanfalse(即将废弃，请直接使用 focus )自动聚焦，拉起键盘 focusBooleanfalse获取焦点 confirm-typeString"done"设置键盘右下角按钮的文字1.1.0confirm-holdBooleanfalse点击键盘右下角按钮时是否保持键盘不收起1.1.0bindinputEventHandle 当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容。 bindfocusEventHandle 输入框聚焦时触发，event.detail = {value: value} bindblurEventHandle 输入框失去焦点时触发，event.detail = {value: value} bindconfirmEventHandle 点击完成按钮时触发，event.detail = {value: value} type 有效值：值说明text文本输入键盘number数字输入键盘idcard身份证输入键盘digit带小数点的数字键盘confirm-type 有效值：值说明send右下角按钮为“发送”search右下角按钮为“搜索”next右下角按钮为“下一个”go右下角按钮为“前往”done右下角按钮为“完成” 示例代码：<!--input.wxml--><view class="section"> <input placeholder="这是一个可以自动聚焦的input" auto-focus/></view><view class="section"> <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" /> <view class="btn-area"> <button bindtap="bindButtonTap">使得输入框获取焦点</button> </view></view><view class="section"> <input maxlength="10" placeholder="最大输入长度10" /></view><view class="section"> <view class="section__title">你输入的是：{{inputValue}}</view> <input bindinput="bindKeyInput" placeholder="输入同步到view中"/></view><view class="section"> <input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" /></view><view class="section"> <input password type="number" /></view><view class="section"> <input password type="text" /></view><view class="section"> <input type="digit" placeholder="带小数点的数字键盘"/></view><view class="section"> <input type="idcard" placeholder="身份证输入键盘" /></view><view class="section"> <input placeholder-style="color:red" placeholder="占位符字体是红色的" /></view>//input.jsPage({ 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'), }}) Bug & Tipbug : 微信版本6.3.30, focus 属性设置无效；bug : 微信版本6.3.30, placeholder 在聚焦时出现重影问题；tip : input 组件是一个 native 组件，字体是系统字体，所以无法设置 font-family；tip : 在 input 聚焦期间，避免使用 css 动画；