受朋友委託，做一個6位驗證碼輸入框，本以為很簡單，但是在寫的時候遇到各種各樣的阻力，在網上查閱資料也寥寥無幾，後來經過一番思考，終於敲定下來本人最滿意的方案，特意發出來讓大家參考一下，希望能幫到大家！

一、效果圖如下：

二、程式碼部分：

wxml：

<form bindsubmit="formSubmit">

  <view class='content'>

    <block wx:for="{{Length}}" wx:key="item">
      <input class='iptbox' value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'></input>
    </block>

  </view>

  <input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input>

  <view>
    <button class="btn-area" formType="submit">Submit</button>
  </view>

</form>

js:

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    Length:6,        //輸入框個數
    isFocus:true,    //聚焦
    Value:"",        //輸入的內容
    ispassword:true, //是否密文顯示 true為密文， false為明文。
  },
  Focus(e){
    var that = this;
    console.log(e.detail.value);
    var inputValue = e.detail.value;
    that.setData({
      Value:inputValue,
    })
  },
  Tap(){
    var that = this;
    that.setData({
      isFocus:true,
    })
  },
  formSubmit(e){
    console.log(e.detail.value.password);
  },
})

wxss:

.content{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 200rpx;
}
.iptbox{
  width: 80rpx;
  height: 80rpx;
  border:1rpx solid #ddd;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.ipt{
  width: 0;
  height: 0;
}
.btn-area{
  width: 80%;
  background-color: orange;
  color:white;
}

三、思路：

1、放置一個輸入框，隱藏其文字和位置，同時設定支付輸入框（表格）樣式
2、當點選輸入框時設定輸入框為聚焦狀態，喚起鍵盤，點選空白處，失去焦點，設為失去焦點樣式，因為輸入框寬高為0，所以不會顯示輸入框和游標，實現隱藏。
3、限制輸入框最大字數並且監聽輸入框狀態，以輸入框值的長度作為輸入框（表格）內容的渲染條件
4、點選提交按鈕時，獲取輸入框內容。