閒著蛋疼，於是學習開發微信小程式，打算寫一個面殺自動法官得小程式，方便和朋友出去面殺，該案例不具備一定的嚴謹性，畢竟此時我才學了2天的小程式，瑟瑟發抖

需求如下：需要輸入房間號，才能進入遊戲房間，類似6尾數密碼框
大致思路：最原本的想法是擼6個文字框，輸入完1個自動focus下一個，發現特麼的鍵盤彈起、收回、彈起、收回，體驗非常糟糕，於是新增一個隱藏的input，其餘6個文字框全部disabled，只負責展示，當用戶習慣性的點選6個虛假的文字框中的任意一個，觸發聚焦，聚焦到隱藏在暗處得文字框，再講隱藏在暗處的文字框中的value渲染到6個假的文字框中，Done!!!

<view class
 
='container'>
  <view class='render-wrap'>
    <block wx:for='{{dataSource}}' wx:key='this'>
      <input type='number' class='render-input' bindtap='onTapFocus' type='{{showType}}' disabled value='{{item.initValue}}'></input>
    </block>
    <input type='number' maxlength
 
='6' focus='{{isFocus}}' class='hidden-input' bindinput='mobileInput'></input>
  </view>
</view>

Page({

  /**
   * 頁面的初始資料
   */
  data: {
  	//使用者輸入明文、暗文
    showType:'number',//如果是密碼換成'password'
    isFocus: false,
    //預設四位，手動copy兩個json，正常密碼框是6位
    dataSource: [{
      initValue: ''
 

    }, {
      initValue: ''
    }, {
      initValue: ''
    }, {
      initValue: ''
    }]
  },
  /**
   * 使用者tap假的Input,focus到隱藏的input
   */
  onTapFocus: function() {
    this.setData({
      isFocus: true
    });
  },
  /**
   * 移動端鍵入
   * 注意:在pc端無法顯示鍵盤，移動端下編譯、預覽正常
   */
  mobileInput: function(e) {

    let dataSource = this.data.dataSource;
    let curInpArr = e.detail.value.split('');
    let curInpArrLength = curInpArr.length;

    if (curInpArr.length != this.data.dataSource.length)
      for (let i = 0; i < dataSource.length - curInpArrLength; i++)
        curInpArr.push('');

    for (let i = 0; i < this.data.dataSource.length; i++) {
      let initValue = 'dataSource[' + i + '].initValue';
      this.setData({
        [initValue]: curInpArr[i]
      });
    }
  },
})

.render-wrap{
  display: flex;
  flex-direction: row;
}
.render-input{
  width: 100rpx;
  height: 100rpx;
  border:1rpx solid #eee;
  border-left: none;
  box-sizing: border-box;
  text-align: center;
}

.render-input:first-child{
  border-left: 1rpx solid #eee;
}

.hidden-input{
  width: 0;
  height: 0;
}