Heim  >  Artikel  >  WeChat-Applet  >  Detaillierter Beispielcode für das WeChat-Applet-Eingabefeld

Detaillierter Beispielcode für das WeChat-Applet-Eingabefeld

高洛峰
高洛峰Original
2017-03-21 16:57:205042Durchsuche

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:

Detaillierter Beispielcode für das WeChat-Applet-Eingabefeld

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn