小程序實踐 01 - 驗證碼輸入框

驗證碼輸入框

實現效果：

輸入數字自動跳到下一個input。

 

實現代碼：

wxml代碼：

<form>
    <view class='ipt_box'>
      <input 
      type='number' wx:for="{{inputLen}}" wx:key="{{index}}" 
      disabled bindtap='onFocus'
      value="{{iptValue.length>=index+1?iptValue[index]:''}}"
      />
    </view>
  <input 
  name="password" password="{{true}}" 
  class='hidden_ipt' maxlength="{{inputLen}}" 
  focus="{{isFocus}}" bindinput="setValue"
  ></input>
</form>

 wxss代碼：

form{
  display: flex;
  justify-content: space-around;
  width:100%;
}
form input{
  height: 94rpx;
  width:94rpx;
  border:1px solid #cdcdcd;
  border-radius: 8rpx;
  display: inline-block;
  line-height: 94px;
  text-align: center;
  font-size: 48rpx;
  color:#323232;
  margin:0 8rpx;
}
form .hidden_ipt{
  height: 0rpx;
  width:0rpx;
  border:none;
  margin:0;
}

.scan_code{
  width:400rpx;
  height: 98rpx;
  display: block;
  margin:0 auto;
  line-height: 98rpx;
  font-size: 32rpx;
  color:#fff;
  background: #6f5bde;
  text-align: center;
  border-radius: 50rpx;
  margin-top:60rpx;
}

js代碼：

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    inputLen:6,
    iptValue:"",
    isFocus:false,
  },

  onFocus:function(e){
    var that = this;
    that.setData({isFocus:true});
  },
  setValue:function(e){
    console.log(e.detail.value);
    var that = this;
    that.setData({ iptValue: e.detail.value });
  }

})

思路：

1.頁面+樣式准備

　　設置驗證碼輸入框樣式，設置disabled 使其不可輸入。

　　另外設置一個輸入框隱藏其樣式，使其不可見。

　　設置隱藏輸入框的最大長度。

2.點擊驗證碼輸入框，使隱藏輸入框為聚焦狀態

3.使用bindinput事件 監聽輸入狀態 獲取value。

4.將value賦值到驗證碼輸入框中