ミニプログラム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
    })
  }

効果画像：

*コンテンツを入力した後、必要に応じて*スタイルを変更できます*