<!--如果在同一個form表單中創(chuàng)建了多個input輸入框，可以給給每個輸入框，創(chuàng)建自己的name=“userName”屬性，可以區(qū)別哪個輸入框，并通過添加屬性提交：bindsubmit="方法名" 重置：bindreset="方法名"，達到清除輸入框內(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>

//獲取應(yīng)用實例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à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 }) } }, //重置按鈕點擊事件 resetBtnClick:function(e){ this.setData({ infoMess: '', userName: '', userN:'', passWd: '', passW:'', }) }, onLoad: function () { console.log('onLoad') var that = this //調(diào)用應(yīng)用實例的方法獲取全局數(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="此處只有在點擊下方按鈕時才聚焦" focus="{{focus}}" /></view><view class="section1"> <button bindtap="bindButtonTap">使得輸入框獲取焦點</button></view><view class="section"> <input class="input" maxlength="10" placeholder="最大輸入長度10" /></view><view class="section__title">你輸入的是：{{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ù)點的數(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.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){ // 光標(biāo)在中間 var left = e.detail.value.slice(0,pos) // 計算光標(biāo)的位置 pos = left.replace(/11/g,'2').length } // 直接返回對象，可以對輸入進行過濾處理，同時可以控制光標(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)閉 }})