vue3 前端验证码-删除最后一个,焦点聚焦在前一个值上,并不会删除值

删除最后一个数字,焦点聚焦在前一个值上,并不会删除值

复制代码
<input
                v-for="(box, index) in boxes"
                :key="index"
                ref="inputRefs"
                :value="box"
                @input="onInputChange(index)"
                @keyup="onKeyDown($event, index)"
                :class="{ focused: box === '' && focusedIndex === index }"
                :maxlength="1"
                type="tel"
                autocomplete="off"
              />
            </div>

逻辑:

javascript 复制代码
const boxes = ref(['', '', '', '', '', '']);
const inputRefs = ref([]);
const errorMessage = ref('');
const focusedIndex = ref(0);
const onInputChange = (index) => {
  boxes.value[index] = inputRefs.value[index].value;
  if (inputRefs.value[index].value.length > 0 && index < 5) {
    inputRefs.value[index + 1].focus();
    inputRefs.value[index + 1].select();
  }
};

const onKeyDown = (event, index) => {
  if (event.key === 'Backspace') {
    if (index > 0) { // 确保当前输入框不是第一个输入框
      boxes.value[index] = ''; // 清空当前输入框的值
      inputRefs.value[index - 1].focus(); // 将焦点移至上一个输入框
    }
  }
};

const verifyCode = computed(() => {
  return boxes.value.join(''); //要提交给后台的6位数字
});

const validateCode = () => {
  if (verifyCode.value.length !== 6) {
    errorMessage.value = '请输入6位验证码';
  } else {
    errorMessage.value = '';
  }
  return verifyCode.value.length === 6;
};

watch(verifyCode, (newValue) => {
  if (newValue.length === 6) {
    validateCode();
  }
});


onMounted(() => {
  nextTick(() => {
    inputRefs.value[0].focus();
  });
})

样式:

css 复制代码
.code-inputs {
  display: flex;
  gap: 5px;
}

.code-inputs input {
  width: 40px;
  height: 40px;
  text-align: center;
  border: 1px solid #ccc;
}

.focused {
  border-color: blue;
}
相关推荐
一直在学习的小白~24 分钟前
node_modules 明明写进 .gitignore,却还是被 push/commit 的情况
前端·javascript·vue.js
前端小超超1 小时前
如何配置capacitor 打包的ios app固定竖屏展示?
前端·ios·web app
nightunderblackcat1 小时前
新手向:从零理解LTP中文文本处理
前端·javascript·easyui
kyle~1 小时前
python---PyInstaller(将Python脚本打包为可执行文件)
开发语言·前端·python·qt
User:你的影子1 小时前
WPF ItemsControl 绑定
开发语言·前端·javascript
小程序设计1 小时前
【springboot+vue】高校迎新平台管理系统(源码+文档+调试+基础修改+答疑)
vue.js·spring boot·后端
会有钱的-_-1 小时前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
LFly_ice2 小时前
学习React-10-useTransition
前端·学习·react.js
咔咔一顿操作2 小时前
【CSS 3D 交互】实现精美翻牌效果:从原理到实战
前端·css·3d·交互·css3
知识分享小能手2 小时前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue