六格验证码填充

六格验证码填充简单思路

html

css

#verificationCode input {
  width: 40px;
  height: 40px;
  font-size: 24px;
  text-align: center;
}

js

const verificationCodeInputs = document.querySelectorAll('#verificationCode input');

verificationCodeInputs.forEach((input, index) => {
  input.addEventListener('input', (e) => {
    const currentInput = e.target;
    const nextInput = verificationCodeInputs[index + 1];
    const previousInput = verificationCodeInputs[index - 1];

    if (currentInput.value !== '') {
      currentInput.value = currentInput.value[0]; // Only allow single character input
      if (nextInput && currentInput.value !== '') {
        nextInput.focus(); // Move focus to the next input box
      }
    } else if (previousInput) {
      previousInput.focus(); // Move focus to the previous input box
    }
  });
});

vue组件 隐藏输入框方式