小程序 6位数密码输入

自己研究的6位数密码输入，不喜就喷吧！

先简单阐述一下原理：

1. 用css编写一个假的6位数输入位置，假装这里有输入框；
2. 用css将一个输入框固定在假输入框样式后面，可以获取焦点，进行编写和删除；
3. 将输入框的输入内容呈现到6位数的输入框内，在输入框内不显示；
4. 获取内容时直接获取输入框的内容即可，6位数的编写只是假的样式。

wxml:

<!-- 输入密码 -->
<view class='password'>
  <input placeholder='' bindinput='toInput' bindfocus='toShow' bindblur='toHidden' maxlength='6' type='password' ></input>
  <view class=' flex'>
    <view class='password_li'>{
   
   {value[0]}}</view>
    <view class='password_li'>{
   
   {value[1]}}</view>
    <view class='password_li'>{
   
   {value[2]}}</view>
    <view class='password_li'>{
   
   {value[3]}}</view>
    <view class='password_li'>{
   
   {value[4]}}</view>
    <view class='password_li'>{
   
   {value[5]}}</view>
  </view>
</view>

wxss:

.password{border: 2rpx solid #eee;border-radius: 4rpx;height: 80rpx;margin: 100rpx auto;display: flex;width: 480rpx;position: relative;background: #fff;overflow: hidden;}
.password_li{width: 80rpx;height: 80rpx;text-align: center;line-height: 80rpx;}
.password_li:not(:last-child){border-right: 2rpx solid #eee;}
.password input{position: absolute;top: 0;left: -1000rpx;width: 4000rpx;height: 80rpx;opacity: 0;color: #fff;line-height: 80rpx;}

js:

data: {value: '';}
toInput: function (e) {
    let that = this
    that.setData({
      value: e.detail.value
    })
  }

效果图：

*可根据需要将输入内容后的样式变更为 * 号 *