input
微信小程序组件_小程序表单组件_小程序输入框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 & Tip bug?: 微信版本6.3.30, focus 属性设置无效；bug?: 微信版本6.3.30, placeholder 在聚焦时出现重影问题；tip?: input 组件是一个 native 组件，字体是系统字体，所以无法设置 font-family；tip?: 在 input 聚焦期间，避免使用 css 动画； 63073279
