【Vue】input框自动聚焦且输入验证码后跳至下一位

场景:PC端
样式:
   <div class="verification-code-input">
            <input v-model="code[index]" v-for="(_, index) in 5" :key="index" type="text" maxlength="1"   @input="handleInput(index)" :ref="'inputRefs' + index" class="input-item">
    
   </div>
函数:
数据:   code: ['', '', '', '', '', ''],  
          handleInput(index) {
            // 限制每个input只能输入一个字符
            // 这里还可以添加其他逻辑,比如验证码格式验证
            const value = this.code[index];
            if (value.length === 1 && index < 4) {
                this.$nextTick(() => {
                    this.$refs[`inputRefs${Number(index) + 1}`][0].focus();
                });
            }
            console.log(this.code);
            if (index == 4) {   这个场景的验证码是5位数
                console.log('输入完毕');
            }
        },

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值