直接用 <input type="tel"> 不足以满足手机验证码输入框的核心需求，因其无法实现自动聚焦、逐位分割、粘贴识别和精准光标控制，易导致粘贴只填首框、退格不跳位、iOS 弹出全键盘、长度与视觉分离难统一等问题。
为什么直接用 <input type="tel"> 不够用
手机验证码输入框的核心需求不是“能输数字”，而是“自动聚焦、逐位分割、粘贴识别、光标控制”。单纯用 <input type="tel"> 会导致：粘贴验证码时只填进第一个框、按退格键不自动跳回前一位、iOS 上弹出全键盘而非数字键盘（部分机型）、无法限制长度为 4 或 6 位且保持视觉分离。
用 4–6 个 <input type="text"> + inputmode="numeric" 最稳妥
原生方案里，分拆输入框仍是兼容性最好、行为最可控的方式。关键不是“能不能做”，而是怎么避免常见翻车点：
- 每个
<input>必须加inputmode="numeric"（Android/Chrome 有效）和pattern="[0-9]*"（iOS Safari 强制数字键盘） - 禁止用户手动输入非数字：监听
input事件，用value = value.replace(/\D/g, '')实时清洗 - 输入满一位后自动 focus 下一个：
if (e.target.value.length === 1) nextInput?.focus() - 退格清空当前位后，自动 focus 上一位：
if (e.target.value === '' && e.inputType === 'deleteContentBackward') prevInput?.focus() - 粘贴时需拦截
paste事件，取clipboardData.getData('text')，逐字符塞进连续的 input 框（注意长度截断）
onpaste 处理不到位，60% 的粘贴失败都发生在这里
默认粘贴行为会把整个字符串塞进当前焦点框，必须完全接管：
- 调用
e.preventDefault()阻止默认粘贴 - 用
e.clipboardData?.getData('text')?.replace(/\D/g, '')提纯数字 - 从当前 input 开始，按顺序赋值：比如粘贴 "123456" 到 4 位框，只取前 4 位；到 6 位框则全填，填完最后一个后
blur()防止继续输入 - 别忘了触发自定义
change或input事件，让表单验证逻辑能感知到值已更新
别忽略 iOS 键盘收起和 autofocus 的冲突
iOS Safari 在页面加载后立即 focus() 某个 input，大概率被系统静默拦截（尤其微信内嵌 WebView）。更可靠的做法是：
立即学习“前端免费学习笔记（深入）”；
- 等用户第一次交互（如点击「获取验证码」按钮）后再 focus 第一个框
- 用
setTimeout(() => input.focus(), 0)延迟一次任务队列，避开某些渲染时机问题 - 如果用户已输入过，再次进入页面时不要自动 focus——容易打断操作，改用
scrollIntoView({ block: 'nearest' })提示位置即可 -
autofocus属性在 iOS 上基本无效，别依赖它
真正难的不是画出六个小框，而是让每一次粘贴、每一次退格、每一次键盘收起，都像原生 App 那样不突兀。这些细节没对齐，用户就会觉得“卡”“不跟手”“输错了还得重来”。
