nta 錯誤 gate inter wid 倒計時 ase dex etime

　　碰見一個小程序的驗證碼輸入，有4個input，輸入第一個的時候第二個聚焦，這個時候軟鍵盤就會收起再彈出，很大的一個bug，最後只能手動寫一個軟鍵盤，現在可以分享出來，讓大家看一看代碼：，這是頁面完成後的圖片，下面代碼獻上：

html部分：

　　

<view class=‘container‘> <view class=‘note_box‘> <view class=‘ntb_head‘>請輸入您的短信驗證碼</view> <view class=‘nt_input‘> <input type=‘number‘ bindinput=‘inuputNum‘ data-ind="1" focus=‘{{inFocus==0?true:false}}‘ disabled maxlength=‘1‘ value=‘{{num1}}‘></input> <input type=‘number‘ bindinput=‘inuputNum‘ data-ind="2" maxlength=‘1‘ focus=‘{{inFocus==2?true:false}}‘ disabled value=‘{{num2}}‘></input> <input type=‘number‘ bindinput=‘inuputNum‘ data-ind="3" maxlength=‘1‘ focus=‘{{inFocus==3?true:false}}‘ disabled value=‘{{num3}}‘></input> <input type=‘number‘ bindinput=‘inuputNum‘ data-ind="4" maxlength=‘1‘ focus=‘{{inFocus==4?true:false}}‘ disabled value=‘{{num4}}‘></input> </view> <view class=‘note_hint‘>驗證碼已發送到158****0771，請註意查收</view> <view class=‘note_anmiteTime‘><text>{{anTime}}</text>秒後可從新獲取</view> </view> <view class=‘numModal‘> <view> <view bindtap=‘clickNum‘ data-num=‘1‘>1</view> <view bindtap=‘clickNum‘ data-num=‘2‘>2</view> <view bindtap=‘clickNum‘ data-num=‘3‘>3</view> </view> <view> <view bindtap=‘clickNum‘ data-num=‘4‘>4</view> <view bindtap=‘clickNum‘ data-num=‘5‘>5</view> <view bindtap=‘clickNum‘ data-num=‘6‘>6</view> </view> <view> <view bindtap=‘clickNum‘ data-num=‘7‘>7</view> <view bindtap=‘clickNum‘ data-num=‘8‘>8</view> <view bindtap=‘clickNum‘ data-num=‘9‘>9</view> </view> <view> <view class=‘color_e‘></view> <view bindtap=‘clickNum‘ data-num=‘0‘>0</view> <view class=‘color_e‘ bindtap=‘clickNum‘ data-num=‘x‘>X</view> </view> </view> </view> css部分： 　　
.note_box{ background: #fff; margin: 20rpx 0; } .ntb_head{ line-height: 120rpx; width: 75%; margin: 40rpx auto; } .nt_input{ display: flex; flex-flow: row; margin-bottom: 40rpx; font-size: 80rpx; width: 80%; margin: 0 auto; } .nt_input input{ border-bottom: 2rpx solid #ddd; height: 100rpx; width: 110rpx; text-align: center; margin: 0 30rpx; } /*提示信息 */ .note_hint{ text-align: center; color: #999; line-height: 120rpx; } .note_anmiteTime{ text-align: center; color: #999; margin-bottom: 50rpx; } .note_anmiteTime text{ color: #0a6; font-size: 36rpx; }
/*數字鍵盤 */ .numModal{ position: fixed; bottom: 0; left: 0; right: 0; width: 100%; background: #fff; } .numModal>view{ display: flex; flex-flow: row; line-height: 120rpx; border-bottom: 2rpx solid #ccc; } .numModal>view>view{ width: 33.33%; text-align: center; font-size: 40rpx; border-right: 2rpx solid #ddd; border-radius: 5rpx; } .color_e{ background: #f1f1f1; } js部分： 　　 data: { // input獲取的數據 inputNumber:"", inFocus:1, //驗證碼輸入是否正確 verifyCode:1234, num1: "", num2: "", num3: "", num4: "", anTime:60,//倒計時 }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { this.intTime(); }, intTime:function(){ var that=this; var time = this.data.anTime; var int = setInterval(function () { time--; that.setData({ anTime:time, }) // console.log(time) if (time == 0) { clearInterval(int); wx.navigateBack(); } }, 1000) }, // 監聽自定義鍵盤的輸入 clickNum:function(e){ var that=this; //獲取點擊的數字 var num = e.currentTarget.dataset.num; //獲取當前哪一個input焦點 var n1,n2,n3,n4; n1 = this.data.num1; n2 = this.data.num2; n3 = this.data.num3; n4 = this.data.num4; if (num==‘x‘){ this.setData({ num1: ‘‘, num2: ‘‘, num3: ‘‘, num4: ‘‘, }) }else{ if (n1 == "") { this.setData({ num1: num, }) } else if (n2 == "") { this.setData({ num2: num, }) } else if (n3 == "") { this.setData({ num3: num, }) } else if (n4 == "") { this.setData({ num4: num, }) var newCode = that.data.verifyCode; var number = that.data.num1 + that.data.num2 + that.data.num3 + that.data.num4; //相等，驗證成功 console.log(number) if (number == newCode) { wx.redirectTo({ url: ‘../sueess/sueess‘, }) } else { //失敗，清空input上面的數值，從新聚焦第一個 wx.showModal({ title: ‘信息‘, content: ‘驗證碼輸入錯誤，請從新輸入‘, showCancel: false,//不顯示取消按鈕 success: function () { that.setData({ num1: "", num2: "", num3: "", num4: "", inFocus: 1, }) }, }) } } } }, // 監聽input的輸入 inuputNum:function(e){ // 獲取當前input的下標 var index, newNumber, number,that; that=this; index = e.currentTarget.dataset.ind; newNumber = e.detail.value; if (index==1){ this.setData({ num1: newNumber, inFocus:2 }) // newIndex = 2; } else if (index == 2) { this.setData({ num2: newNumber, inFocus:3 }) // newIndex = 3; } else if (index == 3) { this.setData({ num3: newNumber, inFocus:4 }) // newIndex = 4; } else if (index == 4) { that.setData({ num4: newNumber }) var newCode = this.data.verifyCode; number = that.data.num1 + that.data.num2 + that.data.num3 + that.data.num4; //相等，驗證成功 console.log(number) if (number == newCode){ wx.redirectTo({ url: ‘../sueess/sueess‘, }) }else{ wx.showModal({ title: ‘信息‘, content: ‘驗證碼輸入錯誤，請從新輸入‘, showCancel:false,//不顯示取消按鈕 success:function(){ that.setData({ num1: "", num2: "", num3: "", num4: "", inFocus:1, }) }, }) } } }, 技術在於討論中進步：http://www.cnblogs.com/laiqiangjin

小程序驗證碼對應的軟鍵盤收起事情處理