This article mainly introduces the relevant information of the WeChat applet input boxControlDetailed explanation and examples (various examples). The input box is the most common in the program, login, registration, acquisitionSearchThe content in the box and so on are required. Friends who need it can refer to the following

WeChat applet input input box control

Today’s main details are written Let’s take a look at the Input input box control in the WeChat applet. The input box is the most common in the program. It is needed for logging in, registering, getting the content in the search box, etc. At the same time, you also need to set up different styles of input boxes. Today’s code must be used accordingly.
First of all, the login style is simply displayed and used on the main page.

The code is as follows:

<!--如果在同一個form表單中創(chuàng)建了多個input輸入框，可以給給每個輸入框，創(chuàng)建自己的
name=“userName”屬性，可以區(qū)別哪個輸入框，并通過添加
屬性提交：bindsubmit="方法名" 重置：bindreset="方法名"，達(dá)到清除輸入框內(nèi)容的目的
js文件中的用法，e.detail.value.userName.length-->
<view class="itemView">用戶名：
 <input class="input" name="userName" placeholder="請輸入用戶名" 
 bindinput="userNameInput"/>
 </view>
<view class="itemView">密 碼：
 <input class="input" password placeholder="請輸入密碼"
 bindinput="passWdInput" />
 </view>
<view class="viewName" style="background-color:#fbf9fe">
 <button class="loginBtn" bindtap="loginBtnClick">登錄</button>
 <button class="resetBtn" bindtap="resetBtnClick">清除</button>
</view>
<view>{{infoMess}}</view>
<view>{{userName}}</view>
<view>{{passWd}}</view>
<view class="viewName" style="margin-top: 60px;">
 <navigator url="Component/TextInput/TextInput">
 <text class="view-Name">各類型輸入框展示</text>
 </navigator>
</view>

//index.js

##

//獲取應(yīng)用實(shí)例
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
 })
 },
 //登錄按鈕點(diǎn)擊事件，調(diào)用參數(shù)要用：this.data.參數(shù)；
 //設(shè)置參數(shù)值，要使用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
 })
 }
 },
 //重置按鈕點(diǎn)擊事件
 resetBtnClick:function(e){
 this.setData({
 infoMess: '',
 userName: '',
 userN:'',
 passWd: '',
 passW:'',
 })
 },
 onLoad: function () {
 console.log('onLoad')
 var that = this
 //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
 app.getUserInfo(function(userInfo){
 //更新數(shù)據(jù)
 that.setData({
 userInfo:userInfo
 })
 })
 }
})

<!--pages/index/Component/TextInput/TextInput.wxml-->
<view class="viewTitle">
 <text class="view-Name">TextInput輸入框展示</text>
 <view class="lineView"></view>
</view>
<view class="section">
 <input class="input" placeholder-style="font-size:15px" 
 placeholder="自動聚焦彈出鍵盤，一個頁面中只能有一個" auto-focus/>
</view>
<view class="section">
 <input class="input" placeholder="此處只有在點(diǎn)擊下方按鈕時才聚焦" focus="{{focus}}" />
</view>
<view class="section1">
 <button bindtap="bindButtonTap">使得輸入框獲取焦點(diǎn)</button>
</view>
<view class="section">
 <input class="input" maxlength="10" placeholder="最大輸入長度10" />
</view>
<view class="sectiontitle">你輸入的是：{{inputValue}}</view>
<view class="section">
 <input class="input" bindinput="bindKeyInput" placeholder="輸入同步到view中"/>
</view>
<view class="section">
 <input class="input" bindinput="bindReplaceInput" placeholder="連續(xù)的兩個1會變成2" />
</view>
<view class="section">
 <input class="input" bindinput="bindHideKeyboard" placeholder="輸入123自動收起鍵盤" />
</view>
<view class="section">
 <input class="input" type="number" placeholder="這是一個數(shù)字輸入框" />
</view>
<view class="section">
 <input class="input" password type="text" placeholder="這是一個密碼輸入框" />
</view>
<view class="section">
 <input class="input" type="digit" placeholder="帶小數(shù)點(diǎn)的數(shù)字鍵盤"/>
</view>
<view class="section">
 <input class="input" type="idcard" placeholder="身份證輸入鍵盤" />
</view>
<view class="section">
 <input class="input" placeholder-style="color:red" placeholder="占位符字體是紅色的" />
</view>

// 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){
 // 光標(biāo)在中間
 var left = e.detail.value.slice(0,pos)
 // 計算光標(biāo)的位置
 pos = left.replace(/11/g,'2').length
 }

 // 直接返回對象，可以對輸入進(jìn)行過濾處理，同時可以控制光標(biāo)的位置
 return {
 value: value.replace(/11/g,'2'),
 cursor: pos
 }
 // 或者直接返回字符串,光標(biāo)在最后邊
 // return value.replace(/11/g,'2'),
 },
 bindHideKeyboard: function(e) {
 if (e.detail.value === "123") {
 //收起鍵盤
 wx.hideKeyboard()
 }
 },
 onLoad:function(options){
 // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
 },
 onReady:function(){
 // 頁面渲染完成
 },
 onShow:function(){
 // 頁面顯示
 },
 onHide:function(){
 // 頁面隱藏
 },
 onUnload:function(){
 // 頁面關(guān)閉
 }
})

WeChat public account platform source code download

WeChat Lala Takeaway 2.2 .4 Decrypt the open source version of WeChat Rubik’s Cube source code

The above is the detailed content of Detailed explanation of examples of input controls developed by WeChat. For more information, please follow other related articles on the PHP Chinese website!