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

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–viewclass=”section”inputplaceholder=”这是一个可以自动聚焦的input”auto-focus//viewviewclass=”section”inputplaceholder=”这个只有在按钮点击的时候才聚焦”focus=”{{focus}}”/viewclass=”btn-area”buttonbindtap=”bindButtonTap”使得输入框获取焦点/button/view/viewviewclass=”section”inputmaxlength=”10″placeholder=”最大输入长度10″//viewviewclass=”section”viewclass=”section__title”你输入的是：{{inputValue}}/viewinputbindinput=”bindKeyInput”placeholder=”输入同步到view中”//viewviewclass=”section”inputbindinput=”bindReplaceInput”placeholder=”连续的两个1会变成2″//viewviewclass=”section”inputpasswordtype=”number”//viewviewclass=”section”inputpasswordtype=”text”//viewviewclass=”section”inputtype=”digit”placeholder=”带小数点的数字键盘”//viewviewclass=”section”inputtype=”idcard”placeholder=”身份证输入键盘”//viewviewclass=”section”inputplaceholder-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){varvalue=e.detail.value;varpos=e.detail.cursor;if(pos!=-1){//光标在中间varleft=e.detail.value.slice(0,pos);//计算光标的位置pos=left.replace(/11/g,’2′).length;}//直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置return{value:value.replace(/11/g,’2′),cursor:pos}//或者直接返回字符串,光标在最后边//returnvalue.replace(/11/g,’2′),}})Bug&Tipbug:微信版本6.3.30,focus属性设置无效；bug:微信版本6.3.30,placeholder在聚焦时出现重影问题；tip:input组件是一个native组件，字体是系统字体，所以无法设置font-family；tip:在input聚焦期间，避免使用css动画；