用4个<input maxlength="1">组合实现，配合CSS flex布局与gap分隔、inputmode="numeric"唤起数字键盘，并用JS监听input事件实现输入后自动跳转及退格回删。
验证码输入框怎么用原生 HTML 实现结构
纯 HTML 本身不提供“验证码输入框”这种控件，它只是表单容器；真正要实现分格输入（比如 4 位验证码各占一格），得靠 input 元素组合 + CSS 控制布局。浏览器原生不支持 input type="code" 这种写法（虽有草案但未落地），所以不能指望一个标签搞定。
常见做法是用 4 个独立的 <input type="text" maxlength="1">，配合 inputmode="numeric" 和 autocomplete="off" 提升移动端体验：
<div class="code-input"> <input type="text" maxlength="1" inputmode="numeric" autocomplete="off"> <input type="text" maxlength="1" inputmode="numeric" autocomplete="off"> <input type="text" maxlength="1" inputmode="numeric" autocomplete="off"> <input type="text" maxlength="1" inputmode="numeric" autocomplete="off"> </div>
- 必须设
maxlength="1"，否则用户可能粘贴多位数字破坏分格逻辑 -
inputmode="numeric"在支持的手机上会唤起数字键盘，但不保证所有机型生效 - 不要用
type="number"：它会带上下箭头、允许负号和小数点，且在某些 iOS 版本中无法触发input事件监听
如何用 CSS 让四个框对齐且视觉连贯
关键不是“美化”，而是让多个 input 看起来像一个整体输入区，同时保持可聚焦、可编辑、无障碍可用。常见翻车点是用 border 或 outline 做连接线，结果焦点态错乱或缩放后断开。
推荐方案：用 flex 布局 + 统一 border + 中间留白模拟分隔：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.code-input {
display: flex;
gap: 8px;
}
.code-input input {
width: 48px;
height: 56px;
text-align: center;
font-size: 20px;
border: 2px solid #ddd;
border-radius: 4px;
outline: none;
}
.code-input input:focus {
border-color: #007bff;
}-
gap比手动加 margin 更可靠，避免父子 margin 合并问题 - 所有
input必须设固定宽高，否则在不同字体/缩放下容易错位 - 别用
border-right: none去“拼接”边框——当某个框获得焦点时，它的右 border 消失会导致整体宽度跳动
JavaScript 怎么自动跳转和回删
用户输完一位就进下一格、按退格键时自动回到前一格——这功能不写 JS 就做不到。重点不是“怎么写”，而是“在哪监听”和“什么时候阻止默认行为”。
核心逻辑绑定在 input 事件上（不是 keyup，因为粘贴、语音输入等也会触发）：
const inputs = document.querySelectorAll('.code-input input');
inputs.forEach((input, i) => {
input.addEventListener('input', () => {
if (input.value.length === 1 && i < inputs.length - 1) {
inputs[i + 1].focus();
}
});
input.addEventListener('keydown', (e) => {
if (e.key === 'Backspace' && !input.value && i > 0) {
e.preventDefault();
inputs[i - 1].focus();
inputs[i - 1].select(); // 方便继续删
}
});
});- 只在
input.value.length === 1时跳转，避免用户删掉内容后又误跳 - 回删逻辑里必须加
e.preventDefault()，否则光标会先移到末尾再跳，造成闪烁 - 别监听
keypress：它不捕获 Backspace，也不响应粘贴 - 移动端软键盘的“完成”按钮不会触发
Enter，所以别依赖keydown.enter来提交
为什么不能直接用第三方库或 canvas 验证码
如果你只是要“用户输入验证码”，那没必要自己画 canvas 或引入 react-otp-input 这类库。但很多人踩坑是因为混淆了两个东西：验证码的「展示」（服务端生成的图片或短信）和「输入载体」（前端怎么收）。
- Canvas 验证码图属于服务端职责，前端只需
<img src="/api/captcha">显示，并加点击刷新逻辑 - 所谓“带校验的验证码组件”，本质还是上面那套多
input+ JS 跳转，额外加了防粘贴、防拖拽、空值校验等，但基础 DOM 结构不变 - 过度封装（比如用
contenteditable+ div 模拟输入）会导致屏幕阅读器识别失败、iOS 光标定位异常、微信内置浏览器兼容问题
最易被忽略的是：没给每个 input 加 aria-label，导致视障用户无法知道“这是第几位验证码”。哪怕只写 aria-label="验证码第1位"，也比不写强。
