Ausführliche Erklärung und Beispiele zur WeChat-Applet-Eingabefeldsteuerung (verschiedene Beispiele)

Eingabefeldsteuerung des WeChat Mini-Programms

Heute werde ich hauptsächlich über die Eingabefeldsteuerung im WeChat Mini-Programm schreiben. Melden Sie sich an, registrieren Sie sich und erhalten Sie das Suchfeld usw. sind erforderlich. Gleichzeitig müssen Eingabefelder unterschiedlicher Stile festgelegt werden, die im heutigen Code entsprechend verwendet werden müssen. Erstens wird der Anmeldestil einfach auf der Hauptseite angezeigt und verwendet.

Der Code lautet wie folgt:

<!--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 }) }) } }) Dann werden im zweiten Schritt die Eingabeeffekte verschiedener Stile und Funktionen angezeigt Schnittstelle Bild:

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(){ // 页面关闭 } })

Vielen Dank fürs Lesen, ich hoffe, es kann allen helfen, vielen Dank für Ihre Unterstützung dieser Website! Ausführlichere Erklärungen und Beispiele für WeChat-Applet-Eingabefeldsteuerelemente (verschiedene Beispiele) finden Sie auf der chinesischen PHP-Website für verwandte Artikel!