本文详解如何修复动态创建的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 < OTP_LENGTH; i++) {
const input = document.createElement('input');
input.type = 'text'; // 推荐用 text + inputmode="numeric"，避免移动端 number 类型的兼容性问题（如 Safari 不支持 maxlength）
input.inputMode = 'numeric'; // 更精准的软键盘提示
input.maxLength = 1; // 使用原生属性而非 setAttribute('max-length', '1')
input.id = `otp-input-${i}`; // 避免重复 ID（原代码中所有 input id 均为 'otp-input'，违反 HTML 唯一性规范）
input.dataset.otpPos = i;
input.addEventListener('input', function (e) {
const target = e.target;
const position = parseInt(target.dataset.otpPos, 10);
// 清空非数字字符（可选增强）
target.value = target.value.replace(/[^0-9]/g, '');
// 若已输入有效数字且未到末位，则聚焦下一个
if (target.value && position < OTP_LENGTH - 1) {
const nextInput = textInputs[position + 1];
if (nextInput) {
nextInput.focus();
}
}
});
// 可选：支持退格键反向跳转（提升体验）
input.addEventListener('keydown', function (e) {
if (e.key === 'Backspace' && !this.value && this.previousElementSibling) {
e.preventDefault();
this.previousElementSibling.focus();
}
});
textInputs.push(input);
otpContainer.appendChild(input);
}
// 可选：初始聚焦第一个输入框
if (textInputs[0]) textInputs[0].focus();⚠️ 关键注意事项：
- 勿用 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 引用及边界处理，即可构建高可用、跨平台兼容的验证码输入体验。
