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!