当前位置: 首页 > news >正文

【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('输入完毕');
            }
        },

相关文章:

  • 国内信创数据库生态
  • 数据结构(一)
  • ubuntu安装桌面
  • 电脑频繁弹出广告?掌握这4个方法,一键快速屏蔽
  • win11安装MySQL
  • 快速搭建uni-app项目,vue2、Vue3与图鸟UI组件封装
  • 【第八章】多线程——Thread类
  • (1)无线电失控保护(二)
  • Compose Multiplatform 1.6.10 发布,解释一些小问题, Jake 大佬的 Hack
  • 【计算机毕业设计】基于SSM+Vue的线上旅行信息管理系统【源码+lw+部署文档】
  • 正则工具类
  • 如何利用Ubuntu服务器运行深度学习项目?
  • WPF中CommandParameter用法
  • 不用从头训练,通过知识融合创建强大的统一模型
  • 【Spring Boot】在项目中使用Spring AI
  • 《QT实用小工具·六十五》基于QPropertyAnimation实现的移动动画和控件覆盖
  • 13、Go Gin集成Viper配置
  • Typescript高级: 深入理解Extract类型
  • 2010-2022年各省新质生产力数据(含原始数据+测算代码+计算结果)
  • 【MySQL】库的操作和表的操作
  • 屠呦呦当选美国科学院外籍院士
  • 国台办:台商台企有信心与国家一起打赢这场关税战
  • 何立峰出席驻沪中央金融机构支持上海建设国际金融中心座谈会并讲话
  • 王沪宁主持召开全国政协主席会议
  • 神舟十九号载人飞船因东风着陆场气象原因推迟返回
  • A股三大股指小幅低收:电力股大幅调整,两市成交10221亿元