I. business scenario: for example, if the verification code is obtained on ios mobile phone, it will be displayed on the keyboard, and then clicked, it will be automatically filled in the input box; at this time, the input box is a good one, and it will be automatically filled in, but now it is required that the 6 digits of the verification code are separated, and the original input cannot be realized, so the number is realized by 6 views, so the verification code needs to be After some column processing, it will be filled into 6 views;

II. Implementation:

wxml:

<view class='indentify-code'>
     <block wx:for="{{codeLength}}" wx:key="index">
            <view class="code-box" bindtap="focusBox">
              {{code.length>=1?code[index]:""}}
              <view wx:if="{{code.length == index && isFocus}}" class="shining"></view>
            </view>
     </block>
</view>
<input class='realCode' password="{{isPass}}" focus="{{isFocus}}" bindblur="blurFn" bindinput="inputVerifyNum" maxlength='{{codeLength}}' name="code" type='num'></input>

js:

data:{
   code: '',             // Verification Code
   codeLength: 6,        // Length of verification code
   type: 'number',
   isPass: false,        // The input property password is not used
   isFocus: true         // Is it focused?
}

Method:

focusBox() {
    console.log("focusing")
    this.setData({
      isFocus: true
    })
},
blurFn() {
    console.log("Defocus")
    this.setData({
      isFocus: false
    })
}
inputPhoneNum(e){
    console.log(e.detail.value)   // Number entered
}

css: the cursor flashes the simulated cursor. See the animation for details

.indentify-code{
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #999;
}
.indentify-code>block{
  border: 1px solid #999;
}
.indentify-code .code-box{
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  /* border: 1px solid #999;
  border-radius: 20rpx; */
  text-align: center;
}
.realCode{
  width: 0rpx;
  height: 0px;
}
.shining{
  width: 2rpx;
  /* border: 1rpx solid #588DED; */
  background: #588DED;
  height: 60rpx;
  animation: shining 1s linear infinite;
  margin: 0 auto;
  margin-top: 10rpx;
}
@keyframes shining {
    0%,100%  {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}

The effect is this: the cursor is blinking

It is found that there is a bug, that is, after focusing, the keyboard pops up, and then automatically turns off the screen, and then turns on the screen, which is still in the focusing state, but the keyboard cannot be adjusted, and it can't be out of focus, and it can't be out of focus after watching other such small programs?????