关键不是监听keyup，而是用input事件+event.target.value.length判断，因粘贴、长按、软键盘回删等均绕过keydown，仅input能全覆盖；需配合maxlength="1"、退格监听、settimeout延迟focus及粘贴矫正等策略确保兼容性。
如何让验证码输入框自动跳到下一格
关键不是监听 keyup，而是用 input 事件 + event.target.value.length 判断。因为粘贴、长按输入、软键盘回删都可能绕过 keydown，只有 input 能覆盖全部场景。
实操建议：
- 每个
<input type="text">只允许填 1 位，设maxlength="1" - 监听所有输入框的
input事件，当当前框值长度为 1 时，focus()下一个框 - 注意处理退格：若当前框为空且有前一个框，应
focus()前一个框（需额外监听keydown的Backspace和Delete） - 移动端 Safari 对
focus()限制较严，建议在setTimeout(..., 0)中调用，避免被拦截
为什么用 input 不用 change 或 blur
change 只在失焦后触发，无法支持“打一个字就跳”的实时体验；blur 更不可靠——用户还没输完就点其他地方，流程就断了。
典型错误现象：
- 用户粘贴 4 位验证码，只有第一个框有值，其余全空 → 因为
change没触发，也没监听粘贴 - 安卓微信内置浏览器中，软键盘回删不触发
keydown→ 退格卡住，无法回退到前一格 - 用
onpaste单独处理粘贴，但没截断长度或分发到各框 → 粘贴内容溢出或丢失
怎么安全地处理粘贴进来的验证码
不能直接 e.preventDefault() 再手动分发，会破坏可访问性（屏幕阅读器、密码管理器可能失效）。正确做法是让粘贴自然发生，再“矫正”。
实操建议：
- 给第一个输入框绑定
paste事件，e.preventDefault()后取e.clipboardData.getData('text') - 用正则
/\D/g过滤非数字（或按实际规则清理），截取前 N 位（如 4 位） - 逐字符赋值给各
input元素：inputs[i].value = cleaned[i] || '' - 最后
focus()最后一个有值的框（或最后一个框），保持光标位置合理
移动端软键盘弹起后自动聚焦失效怎么办
iOS 和部分安卓 WebView 中，页面加载后首次 focus() 可能被忽略，尤其在 DOMContentLoaded 阶段调用时。这不是代码错，是系统策略。
绕过方法：
- 把初始聚焦逻辑放到
setTimeout(() => input.focus(), 300)，等渲染和键盘准备就绪 - 更稳妥的做法：监听
touchstart或click用户主动交互后再聚焦（比如用户点任意空白处） - 避免在
autofocus属性上依赖 —— 它在 iOS Safari 中对非textarea基本无效 - 如果用 Vue/React，确保 ref 绑定完成后再调用
focus()，别在mounted/useEffect立即执行
最麻烦的其实是 Android 输入法自带的“智能纠错”——它可能把单个数字自动扩成词组，导致输入框里突然出现两个字符。这时候得靠 input 事件里实时截断：if (el.value.length > 1) el.value = el.value.slice(0, 1)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
