本文详解为何 OTP 输入框中使用 change 事件无法触发自动跳转，以及如何通过 input 或 keyup 事件替代实现流畅的数字逐位跳转逻辑，并提供可直接运行的优化代码与关键注意事项。
本文详解为何 otp 输入框中使用 `change` 事件无法触发自动跳转，以及如何通过 `input` 或 `keyup` 事件替代实现流畅的数字逐位跳转逻辑，并提供可直接运行的优化代码与关键注意事项。
在构建六位 OTP（One-Time Password）输入组件时，一个常见需求是：用户在某一位输入单个数字后，焦点自动移至下一位输入框。然而，许多开发者会误用 change 事件监听值变化，导致自动聚焦失效——正如问题中所示：input.onchange 在用户键入后并未立即触发，而需先失焦（如点击外部），这完全违背了“输入即跳转”的交互预期。
根本原因在于语义差异：
- change 事件仅在元素失去焦点且值发生变更后触发（MDN 明确定义），适用于表单提交前校验等场景；
- 而 input 事件则在每次输入值变化时实时触发（包括键盘输入、粘贴、剪切等），是实现即时响应的正确选择；
- keyup 也可用，但不如 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 更稳妥（避免移动端 number 键盘限制）
input.maxLength = 1; // 原 setAttribute('max-length') 无效，应为 maxLength
input.id = `otp-input-${i}`; // 避免重复 ID（原 'otp-input' 导致 DOM 冲突）
input.dataset.otpPos = i;
input.className = 'otp-input';
// 关键：监听 input 事件而非 change
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：这是解决本问题的核心——input 事件保证每次键入/粘贴后立即响应；
✅ 修正 HTML 属性写法：input.maxLength = 1（JS 属性）而非 setAttribute('max-length', '1')（HTML 属性名错误且无效）；
✅ 规避重复 ID：动态生成时务必使用唯一 id（如 otp-input-0），否则 document.getElementById 等操作将不可靠；
✅ 防御性输入处理：通过正则过滤非数字字符，防止非法输入破坏跳转逻辑；
✅ 增强用户体验：添加 Backspace 回退支持，让用户可反向编辑；
❌ 避免 click() + focus() 组合：对未插入 DOM 的元素调用 focus() 可能失败；确保元素已挂载后再操作（本例中 appendChild 后再绑定事件，安全可靠）。
最终效果：用户在任一输入框键入数字，焦点无缝移至右侧下一个框；若删除内容并按退格，则返回左侧框——整个流程自然、健壮、符合用户直觉。
