Explication détaillée et exemples de contrôle de la zone de saisie de l'applet WeChat (divers exemples)

Contrôle de la zone de saisie du programme WeChat Mini

Aujourd'hui, j'écrirai principalement sur le contrôle de la zone de saisie du programme WeChat Mini. La zone de saisie est la plus courante dans le programme. champ de recherche. Le contenu, etc., est requis. En même temps, des zones de saisie de styles différents doivent être définies, qui doivent être utilisées en conséquence dans le code actuel. Tout d'abord, le style de connexion est simplement affiché et utilisé sur la page principale

Le code est le suivant :

<!--index.wxml--&gt. ;

用户名： 密 码： 登录 清除 {{infoMess}} {{userName}} {{passWd}} 各类型输入框展示 //index.js

//获取应用实例 var app = getApp() Page({ data: { infoMess: '', userName: '', userN:'', passWd: '', passW:'' }, //用户名和密码输入框事件 userNameInput:function(e){ this.setData({ userN:e.detail.value }) }, passWdInput:function(e){ this.setData({ passW:e.detail.value }) }, //登录按钮点击事件，调用参数要用：this.data.参数； //设置参数值，要使用this.setData({}）方法 loginBtnClick:function(){ if(this.data.userN.length == 0 || this.data.passW.length == 0){ this.setData({ infoMess:'温馨提示：用户名和密码不能为空！', }) }else{ this.setData({ infoMess:'', userName:'用户名：'+this.data.userN, passWd:'密码：'+this.data.passW }) } }, //重置按钮点击事件 resetBtnClick:function(e){ this.setData({ infoMess: '', userName: '', userN:'', passWd: '', passW:'', }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } }) Ensuite, les effets d'entrée

TextInput输入框展示 使得输入框获取焦点 你输入的是：{{inputValue}} // pages/index/Component/TextInput/TextInput.js Page({ data: { focus: false, inputValue: '' }, bindButtonTap: function() { this.setData({ focus: true }) }, 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() } }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) de différents styles et fonctions sont affichés dans la seconde interface Photo :

Merci d'avoir lu, j'espère que cela pourra aider tout le monde, merci pour votre soutien à ce site !

Pour des explications plus détaillées et des exemples de contrôles de la zone de saisie de l'applet WeChat (divers exemples), veuillez faire attention au site Web PHP chinois pour les articles connexes !