E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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动画;

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序组件,微信小程序组件_小程序表单组件_小程序输入框input
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏