小程序验证码输入框自动聚焦下个输入框

最开始我想的是有多少个输入框，就放多少个input，做完会发现有各种bug。比如键盘突然消失、没聚焦下个输入框、操作不丝滑等。
正确思路是一个输入框就够了，然后通过改变样式（间隔、高亮）来实现，就是表面看起来是六个输入框，本质上只有一个input

正确解法：

<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
		}
	},
}

完整版可参考链接：

https://blog.csdn.net/u011423258/article/details/106683068?spm=1001.2014.3001.5506