阐述了如何构建具有视觉分割效果的短信验证码输入框，提升用户体验。

HTML结构

使用

元素包裹验证码输入框和其他表单元素，每个验证码数字使用独立的元素，并限制其最大输入长度为1。

<form>
  <div class="code-container">
    <input class="code-input" maxlength="1" type="text"/>
  </div>
  <button type="submit">发送验证码</button>
</form>

CSS样式

利用CSS定义.code-container和.code-input的样式，实现小格子分割效果。display: flex或grid布局可以轻松排列输入框。

.code-container {
  display: flex;
  flex-wrap: nowrap;
}

.code-input {
  width: 25px;
  height: 25px;
  margin: 0 5px;
  text-align: center;
  border: 1px solid #ccc;
}

JavaScript交互

JavaScript用于处理用户键盘输入事件，限制输入类型，并在所有格子填满后自动提交表单。

// 示例代码片段
const codeInputs = document.querySelectorAll('.code-input');

codeInputs.forEach((input, index) => {
  input.addEventListener('input', () => {
    // 限制输入数字
    input.value = input.value.replace(/[^0-9]/g, '');

    // 自动跳转到下一个输入框
    if (input.value !== '' && index < codeInputs.length - 1) {
      codeInputs[index + 1].focus();
    }
  });
});

总结

通过HTML结构、CSS样式和JavaScript交互的协同工作，可以实现功能完善且用户友好的短信验证码输入框。