小程序输入框完成自动切换到下个输入框

Posted 2022-06-30 前端面试题库助手

先看图

<view class="w-80 h-100 rad-10 b-a-9 tc f-50" v-for="(item,index)  in 6">
  <input class="w-80 h-100 " maxlength="1" type="text"    @input="inputListener(index)"   :focus="focus && (focusIndex == index)"/>
</view>

data()
    return
        focus: true,
        code:[,,,,,],// 需要获取焦点的序号
        focusIndex: 0
    

method:
      // 输入时事件
    inputListener(e) 
        if (this.focusIndex != e)this.focusIndex=e
        if (e < 6) 
                    this.focus=true,
                    this.focusIndex=e + 1
        else 
                    this.focus=false
        
    ,

即可实现功能