Maison >Applet WeChat >Développement de mini-programmes >Exemple de code détaillé de la zone de saisie de l'applet WeChat
Cet article présente principalement l'explication détaillée et des exemples simples de la zone de saisie de l'applet WeChat. Les amis dans le besoin peuvent se référer aux
rendus d'implémentation :
.Saisie de la zone de saisie de l'applet WeChat
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | 输入框的内容 | |
type | String | text | input的类型,有效值:text,number,idcard,digit,time,date |
password | Boolean | false | 是否是密码类型 |
placeholder | String | 输入框为空时占位符 | |
placeholder-style | String | 指定placeholder的样式 | |
placeholder-class | String | input-placeholder | 指定placeholder的样式类 |
disabled | Boolean | false | 是否禁用 |
maxlength | Number | 140 | 最大输入长度,设置为0的时候不限制最大长度 |
auto-focus | Boolean | false | 自动聚焦,拉起键盘。页面中只能有一个input设置auto-focus属性 |
focus | Boolean | false | 使得input获取焦点 |
bindchange | EventHandle | 输入框失去焦点时,触发bindchange事件,event.detail={value:value} | |
bindinput | EventHandle | 除了date/time类型外的输入框,当键盘输入时,触发input事件,event.detail={value:value},处理函数可以直接return一个字符串,将替换输入框的内容。 | |
bindfocus | EventHandle | 输入框聚焦时触发,event.detail = {value:value} | |
bindblur | EventHandle | 输入框失去焦点时触发,event.detail = {value:value} |
Exemple de code :
<!--input.wxml--> <view> <input> </view> <view> <input> <view> <button>使得输入框获取焦点</button> </view> </view> <view> <input> </view> <view> <view>你输入的是:{{inputValue}}</view> <input> </view> <view> <input> </view> <view> <input> </view> <view> <input> </view> <view> <input> </view> <view> <input> </view> <view> <input> </view> <view> <input> </view> <view> <input> </view>
//input.js Page({ data:{ focus:false, inputValue:"" }, bindButtonTap:function(){ this.setData({ focus:Date.now() }) }, 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'), }, bindHideKeyboard:function(e){ if(e.detail.value === "123"){ //收起键盘 wx.hideKeyboard(); } } })
Merci d'avoir lu, j'espère que cela pourra aider tout le monde, merci pour votre soutien de ce site !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!