小程序六位密码框简单实现方法

**

小程序六位密码框简单实现方法

**

中心思想

设置六个input框 父级display:flex;布局你想要的样子就可以
下面再放一个用来输入的框
定位到上面六个排列好的框上层 设置z-index=“2或者更多”
接着在设置样式opacity:0，这样烦人的光标也能轻松隐藏。
js就不多说了 傻瓜式赋值，不写那么麻烦了

wxml部分

<view style="position: relative;">
  <view class="input">
    <input class='inputText' value='{{input1}}'></input>
    <input class='inputText' value='{{input2}}'></input>
    <input class='inputText' value='{{input3}}'></input>
    <input class='inputText' value='{{input4}}'></input>
    <input class='inputText' value='{{input5}}'></input>
    <input class='inputText' value='{{input6}}'></input>
  </view>
  <input class='inputnum' auto-focus="true" maxlength='6' type='number' bindinput="inputnum"></input>
</view>

js部分

 inputnum(e){
    console.log(e.detail.value.length)
    var num = e.detail.value
    var length = e.detail.value.length
    console.log(num[0])
    var _this = this
    if (length == 1){
      _this.setData({
        input1: num[0],
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
      })
    } else if (length == 2){
      _this.setData({
        input1: num[0],
        input2: num[1],
        input3: '',
        input4: '',
        input5: '',
        input6: '',
      })
    } else if (length == 3){
      _this.setData({
        input1: num[0],
        input2: num[1],
        input3: num[2],
        input4: '',
        input5: '',
        input6: '',
      })
    } else if (length == 4) {
      _this.setData({
        input1: num[0],
        input2: num[1],
        input3: num[2],
        input4: num[3],
        input5: '',
        input6: '',
      })
    } else if (length == 5) {
      _this.setData({
        input1: num[0],
        input2: num[1],
        input3: num[2],
        input4: num[3],
        input5: num[4],
        input6: '',
      })
    } else if (length == 6) {
      _this.setData({
        input1: num[0],
        input2: num[1],
        input3: num[2],
        input4: num[3],
        input5: num[4],
        input6: num[5],
      })
    }else{
      _this.setData({
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
      })
    }
 
  }

css部分

.input{width: 100%;display: flex;margin: auto;border: 1px solid;}
.inputText{width: 60rpx;height: 60rpx;border: 1px solid;text-align: center;}
.inputnum{position: absolute;border: 1px solid;width: 100%;top: 0;opacity: 0;z-index: 11;}

这样就完成了

结尾

本人微信 lw1713977927，欢迎各路大神前来探讨，一起在代码海洋驰骋。