当前位置: 首页 > 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】库的操作和表的操作
  • 五一期间上海景观照明开启重大活动模式,外滩不展演光影秀
  • 国家发改委:建立实施育儿补贴制度
  • 伊朗港口爆炸已致40人死亡
  • 王庆成:儒家、墨家和洪秀全的“上帝”
  • 湖南小伙“朱雀玄武敕令”提交申请改名为“朱咸宁”
  • 特朗普将举行集会庆祝重返白宫执政百日,被指时机不当