微信小程序格子输入框

效果：

 

 可以赋值，可以删除指定位置的值，删除后光标前移，输入值后移

wxml:

<view class="detail_box">
    <view class="title"><text>AI识别</text></view>

    <view class="code_box">
      <view class="input_box" wx:for="{{carNumerArr}}" wx:key="index">
        <input 
        type="text" 
        value="{{item}}"
        data-index="{{index}}" 
        bindinput="_handleInput"
        focus="{{item.focus}}" 
        value="{{item.value}}" 
         />
      </view>
    </view>
</view>

.detail_box .title {
  font-size: 16px;
  color: #0D0E12;
  width: calc(100vw - 32px);
  padding-left: 16px;
  padding-top: 16px;
}

.code_box {
    display: flex;
    width: calc(100% - 32px);
    padding-left: 16px;
    padding-top: 16px;
}
.input_box {
    width: 12%;
    height: 44px;
    background: #F6F6F9;
    border-radius: 4px;
    margin-right: 0.5%;
    text-align: center;
    line-height: 44px;
}
.code_box input {
    /* position: absolute; */
    width: 100%;
    height: 100%;
}

js

data: {
    baiduToken:'',
    tempFiles:'',
    // carNumber:'',
    // carNumberArr:['', '', '', '', '', '' ,'', ''],
    carInfoList:[],

    showBtn: false,


    carNumerArr:[
        {value: "",focus: false,},
        {value: "",focus: false,},
        {value: "",focus: false,},
        {value: "",focus: false,},
        {value: "",focus: false,},
        {value: "",focus: false,},
        {value: "",focus: false,},
        {value: "",focus: false,},
    ],
    num_text:''



  },

onLoad(options) {
    if(options.carNumber){
      let carNumber = options.carNumber.split("")
      let carNumerArr = []
      for(let i = 0; i < carNumber.length; i++){
        carNumerArr.push({
          value: carNumber[i],
          focus: false
        })
      }
      this.setData({
        carNumerArr: carNumerArr
      })
      this.getListData()
    }
  },

_handleInput(e){
    let index = e.currentTarget.dataset.index
    let carNumerArr = this.data.carNumerArr
    if(e.detail.value){
        let value = e.detail.value.substr(-1)   
        carNumerArr[index].value = value
        for(let i = 0; i < carNumerArr.length; i++){
            carNumerArr[i].focus = false
        }
        if(index == carNumerArr.length -1){
            carNumerArr[index].focus = true
        }else{
            carNumerArr[index+1].focus = true
        }
        
        
    }else{
        carNumerArr[index].value = ''
        for(let i = 0; i < carNumerArr.length; i++){
            carNumerArr[i].focus = false
        }
        if(index !== 0){
            carNumerArr[index-1].focus = true
        }else{
            carNumerArr[0].focus = true
        }
        
    }
    
    this.setData({
        carNumerArr,
    })
},