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}} 各类型输入框展示 Copier après la connexion //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 }) }) } }) Copier après la connexion Ensuite, les effets d'entrée

TextInput输入框展示 使得输入框获取焦点 你输入的是：{{inputValue}} Copier après la connexion // 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(){ // 页面关闭 } }) Copier après la connexion 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 !

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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