Shulou(Shulou.com)06/03 Report--

This article mainly introduces the Wechat development of how to achieve input control, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

WeChat Mini Programs input input box control

Today, mainly write about WeChat Mini Programs in the Input input box control, the input box is the most common in the program, login, registration, access to the contents of the search box and so on, at the same time, you also need to set different styles of input box, today's code should be used accordingly.

First of all, the login style is simply displayed and used on the main page.

The code is as follows:

User name: password: login clears {{infoMess}} {{userName}} {{passWd}} type input box display

/ / index.js

/ / get application instance var app = getApp () Page ({data: {infoMess:', userName:', userN:'', passWd:', passW:''}, / / user name and password input box event userNameInput:function (e) {this.setData ({userN:e.detail.value})}, passWdInput:function (e) {this.setData ({passW:e.detail.value})}, / / login button click event The call parameter should be: this.data. Parameter; / / to set the parameter value, use the this.setData ({}) method loginBtnClick:function () {if (this.data.userN.length = = 0 | | this.data.passW.length = = 0) {this.setData ({infoMess:' warm Tip: username and password cannot be empty!' ,})} else {this.setData ({infoMess:'', userName:' username:'+ this.data.userN, passWd:' password:'+ this.data.passW})}, / / reset button click event resetBtnClick:function (e) {this.setData ({infoMess:'', userName:'', userN:'', passWd:'', passW:'',})} OnLoad: function () {console.log ('onLoad') var that = this / / call the method of the application instance to obtain global data app.getUserInfo (function (userInfo) {/ / update data that.setData ({userInfo:userInfo})

Then input with different styles and functions is displayed in the second interface.

The TextInput input box display makes the input box gain focus. What you enter is: {{inputValue}} / / pages/index/Component/TextInput/TextInput.jsPage ({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) {/ / the cursor is in the middle var left = e.detail.value.slice (0Powerpos) / / calculates the position of the cursor pos = left.replace (/ 11Universe 2'). Length} / / directly returns the object Input can be filtered At the same time, you can control the position of the cursor: return {value: value.replace (/ 11Uniqqqlagen2'), cursor: pos} / / or return the string directly, and the cursor is at the end of / / return value.replace (/ 11pm),}, bindHideKeyboard: function (e) {if (e.detail.value = = "123") {/ / put away the keyboard wx.hideKeyboard ()}} OnLoad:function (options) {/ / parameters brought by page initialization options for page jump}, onReady:function () {/ / page rendering completed}, onShow:function () {/ / page display}, onHide:function () {/ / page hiding}, onUnload:function () {/ / page closed}})

Effect picture:

Thank you for reading this article carefully. I hope the article "how to implement input controls in Wechat Development" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channels. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.