inputmode="numeric"是验证码输入框唤起数字键盘最稳妥的方式；它不改变value类型、不干预校验与退格逻辑，仅声明键盘意图，需搭配type="text"、maxlength="1"、autocomplete="off"四件套使用。
inputmode="numeric" 是验证码输入框在移动端唤起数字键盘最稳妥的方式，比 type="number" 更可靠 —— 它不改 value 类型、不插手校验、不干扰空格和退格逻辑，只专注做一件事：告诉系统“这该弹数字盘”。
为什么不用 type="number" 做验证码输入
验证码场景下，type="number" 会带来三类实际卡点：
- iOS Safari 中，
type="number"可能禁用长按粘贴，用户无法快速粘贴短信里的 6 位码 - 某些安卓 WebView 里，它允许输小数点或负号（如
-123），而验证码纯数字，这些字符既无意义又需额外过滤 - 部分 iOS 版本中，
type="number"的input事件监听失效，导致“输完自动跳转”逻辑断链
真正需要的只是数字键盘 + 单字符输入 + 光标可控 —— type="text" 配合 inputmode="numeric" 刚好满足，且语义干净。
inputmode="numeric" 必须搭配的属性组合
单独写 inputmode="numeric" 在旧版 iOS 或 X5 内核里大概率被忽略。要落地生效，得凑齐这四件套：
立即学习“前端免费学习笔记（深入）”；
-
type="text"：基础类型，确保行为可预测 -
inputmode="numeric"：显式声明键盘意图 -
maxlength="1"：防粘贴多字符破坏分格布局（4 个input各管 1 位） -
autocomplete="off"：避免浏览器填入历史手机号或邮箱，干扰验证码流程
别加 pattern 或 required —— 它们对 inputmode 无增强作用，反而可能在某些安卓机型上触发 fallback 全键盘。
移动端键盘没弹数字盘？先查这三个点
如果实测仍出全键盘，问题通常不在代码本身，而在环境或配置：
- iOS 版本低于 16.4：原生不支持
inputmode，此时只能降级为type="tel"（语义不严谨但兼容性高），并用 CSS 隐藏默认符号 - 页面未走 HTTPS：Chrome 和 Safari 对
autocomplete="one-time-code"等敏感属性强制要求安全上下文，inputmode虽无此限制，但混合使用时易受连带影响 - 中文输入法处于激活状态：系统级限制，前端无法绕过；用户切回英文/数字模式后即恢复，无需拦截或警告
真正在意体验的团队，会把 inputmode="numeric" 当作“尽力而为”的提示，而非强约束 —— 校验逻辑始终放在提交前，用 /^[0-9]{6}$/.test(value) 这类正则兜底。
光标跳转和退格逻辑怎么写才不翻车
四个独立 input 实现分格输入时，input 事件监听是核心，但容易踩两个坑：
- 粘贴 6 位码时，不能简单
split('')塞进每个框 —— 用户可能粘贴带空格或换行的内容，得先replace(/\D/g, '')清洗 - 退格删空当前框时，必须手动
focus()前一个框，并保持光标在末尾；否则光标会卡在已空的框里，用户再按退格无效 - 别用
keydown拦截 —— 它捕获不到粘贴、拖拽、开发者工具改值等操作，且会干掉 Ctrl+V、方向键等正常行为
真实可用的最小闭环是：监听 input → 清洗值 → 更新当前框 → 若长度达 1 且有下一个框，focus() 下一个 → 若当前为空且有上一个框，focus() 上一个并 setSelectionRange(1, 1)。
