开干！

1、wxml

<view data-place="0" class="input{{curFocus === 0 ? ' on':''}}" bindtap="openKeyBoard">{{passwd[0]}}</view>
<view data-place="1" class="input{{curFocus === 1 ? ' on':''}}" bindtap="openKeyBoard">{{passwd[1]}}</view>
<view data-place="2" class="input{{curFocus === 2 ? ' on':''}}" bindtap="openKeyBoard">{{passwd[2]}}</view>
<view data-place="3" class="input{{curFocus === 3 ? ' on':''}}" bindtap="openKeyBoard">{{passwd[3]}}</view>
<input type="number" model:value="{{inputValue}}" focus="{{focus}}" class="input-original" hold-keyboard="{{true}}" confirm-hold="{{true}}" maxlength="4" bindinput="bindKeyInput" />

2、less

闪烁代替光标

.on { animation: glow 1s linear infinite; }
@keyframes glow {
  50% { border-color: #ff6666; }
  100% { border-color: #eee; }
}

3、js

openKeyBoard(e: any) {
    const { place } = e?.currentTarget?.dataset;
    this.data.passwd[place] = '';
    this.setData({ curFocus: parseInt(place), inputValue: '', focus: true, assign: true, passwd: this.data.passwd });
  },
  bindKeyInput: function (e) {
    const { value } = e?.detail;
    let tmp = value.split('');
    let curFocus = tmp.length;
    let inputValue = '';
    if (this.data.assign) {
      this.data.passwd[this.data.curFocus] = value.substr(-1);
      inputValue = this.data.passwd.join('');
      curFocus = this.data.curFocus;
      console.log('修改指定位置');
    } else {
      inputValue = value;
      this.data.passwd = value.split('');
    }
    this.setData({
      inputValue: inputValue,
      assign: false,
      passwd: this.data.passwd,
      curFocus: curFocus
    })
    if (inputValue.length === 4) {
      this.setData({
        list: [],
        loading: true
      });
      wx.hideKeyboard();
      this.loadList(true);
    }
  },