Heim > Artikel > WeChat-Applet > Detaillierter Beispielcode für das WeChat-Applet-Eingabefeld
Dieser Artikel stellt hauptsächlich die detaillierte Erklärung und einfache Beispiele des Eingabefelds des WeChat-Applets vor. Freunde in Not können sich auf die
Implementierungsdarstellungen beziehen:
Eingabe des WeChat-Applet-Eingabefelds
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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} |
Beispielcode:
<!--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(); } } })
Vielen Dank fürs Lesen, ich hoffe, es kann allen helfen, vielen Dank für Ihre Unterstützung von diese Seite!
Das obige ist der detaillierte Inhalt vonDetaillierter Beispielcode für das WeChat-Applet-Eingabefeld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!