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动画;
微信小程序组件,微信小程序组件_小程序表单组件_小程序输入框input
相关推荐
支付宝小程序页面逻辑处理之事件(onTap,onTouchStart,onTouchMove,onTouc安国市E企盈小程序hEnd)
瑶海区E企盈小程序微信小程序错误码参考
小程序基永兴县E企盈小程序础
微信小程序开发坑背景图之微博图西华县E企盈小程序床
【每日p疏勒县E企盈小程序ython小程序练习】第一天:将你的QQ头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果。
小程序开发小望江县E企盈小程序程序的组成
增值税伊春区E企盈小程序发票二维码内容字段解析
微信第三方开放平台代小程序微信公众号开发返回的错误码小河区E企盈小程序大全
天台县E企盈小程序微信errcode大全
如何获武城县E企盈小程序取微信小店小程序的AppID
小弥勒县E企盈小程序程序中上传图片并进行压缩(二)
小程序图片不显弥勒县E企盈小程序示的解决方法
最新评论
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务
优秀的团队
好服务,值得信赖
不错的服务