如何实现动态生成的OTP输入框自动聚焦与跳转-js教程-PHP中文网

如何实现动态生成的OTP输入框自动聚焦与跳转

本文详解为何otp输入框的focus/blur逻辑在change事件中失效，并提供基于input或keyup事件的可靠解决方案，确保用户输入单个数字后立即自动跳转至下一个输入框。

在构建六位OTP（One-Time Password）输入组件时，一个常见需求是：用户在某个输入框中输入一位数字后，焦点自动移至下一个输入框。许多开发者会自然选择 change 事件来监听值的变化并触发 focus()，但实际运行中却常发现跳转失败——控制台日志显示 blur 和 focus 被调用，但光标并未真正落到下一个输入框上。

根本原因在于 change 事件的触发时机：它仅在输入框失去焦点（blur）且值发生变更后才触发，而非实时响应输入。这意味着当用户刚键入一个数字（如“5”），此时输入框仍处于聚焦状态，change 事件尚未触发；只有当用户手动点击其他区域、按 Tab 键或主动失焦后，change 才执行——这完全违背了“即时跳转”的交互预期。

✅ 正确做法是改用 input 事件（推荐）或 keyup 事件：

input 事件在值每次变化时立即触发（包括输入、粘贴、删除等），语义准确且兼容性好（IE9+）；
keyup 事件则在按键释放时触发，适合需区分按键行为的场景（如排除 Ctrl+V 粘贴干扰），但需额外判断键值（如 e.key.length === 1）。

以下是优化后的核心代码（已修复ID重复、maxlength拼写、焦点竞争等问题）：

password-manager

本地密码管理技能，可添加、编辑、删除、搜索密码，支持分类和备注，数据本地存储，支持导入导出和备份。用户提及密码、账号、密码管理、保存密码或查找密码时使用。

下载

const OTP_LENGTH = 6;
const textInputs = [];
const otpContainer = document.getElementById('otp-container');

for (let i = 0; i  {
    const target = e.target;
    const position = parseInt(target.dataset.otpPos, 10);

    // 清空非法字符（如字母、符号），只保留数字
    target.value = target.value.replace(/[^0-9]/g, '');

    if (target.value && position  {
        const nextInput = textInputs[position + 1];
        if (nextInput) {
          nextInput.focus();
        }
      }, 0);
    }
  });

  input.addEventListener('keydown', (e) => {
    // 支持 Backspace 删除时反向跳转（可选增强）
    if (e.key === 'Backspace' && !e.target.value && e.target.dataset.otpPos > 0) {
      setTimeout(() => {
        const prevInput = textInputs[parseInt(e.target.dataset.otpPos, 10) - 1];
        if (prevInput) prevInput.focus();
      }, 0);
    }
  });

  textInputs.push(input);
  otpContainer.appendChild(input);
}

// 自动聚焦第一个输入框
if (textInputs[0]) textInputs[0].focus();

⚠️ 关键注意事项：