本文详解如何修复动态创建的6位OTP输入框中焦点无法自动跳转的问题，核心在于正确选用input事件替代change事件，并配合合理的DOM操作逻辑。
本文详解如何修复动态创建的6位otp输入框中焦点无法自动跳转的问题，核心在于正确选用`input`事件替代`change`事件，并配合合理的dom操作逻辑。
在构建 OTP（One-Time Password）输入组件时，常见需求是：用户在某一位输入数字后，光标自动移至下一位输入框。当输入框为 JavaScript 动态创建时，若错误地依赖 change 事件触发焦点切换，将导致行为失效——因为 change 仅在输入框失去焦点且值发生变更后才触发，而用户尚未离开当前框，自然无法满足触发条件。
✅ 正确做法是监听 input 事件：它在每次输入值变化（包括键盘输入、粘贴、删除等）时即时触发，无需等待失焦，完美契合自动跳转场景。
以下是优化后的完整实现逻辑（含关键注释）：
const OTP_LENGTH = 6;
const textInputs = [];
const otpContainer = document.getElementById('otp-container');
for (let i = 0; i <p>⚠️ 关键注意事项：</p>
- 勿用 change 替代 input：change 的延迟触发机制使其完全不适用于实时焦点流转；
- 避免重复 ID：动态创建元素时需确保 id 唯一，否则 document.getElementById 等操作不可靠；
- 慎用 type="number"：部分浏览器对 number 输入框的 maxLength 支持不佳，且会触发非预期的上下箭头/科学计数法行为；推荐 type="text" + inputmode="numeric" 组合；
- 手动调用 focus() 前确保元素已挂载：动态创建后立即添加事件监听并 appendChild，即可保证 textInputs[position + 1] 可访问；
- 防误触发：加入 target.value 判断，避免空输入或粘贴多字符时异常跳转；
- 用户体验增强：补充 Backspace 反向跳转逻辑，使操作更符合直觉。
总结：OTP 自动跳转的核心在于事件时机选择——input 提供毫秒级响应，是动态输入场景的黄金标准。结合语义化属性、健壮的 DOM 引用及边界处理，即可构建高可用、跨平台兼容的验证码输入体验。
