iPhone「来自信息」快捷粘贴OTP到6格输入框无法触发捕获事件如何解决

问题根因 #

iOS 系统级的短信OTP快捷填充不属于常规的用户粘贴/键盘输入行为，不会触发paste、keyup、keypress、change这类交互事件，仅会触发标准的input事件，这是之前的监听逻辑失效的核心原因。

适配方案（无需更换为单输入框） #

方案1：监听input事件处理完整OTP内容 #

iOS 自动填充时会将完整的OTP字符串写入当前聚焦的输入框，即使输入框设置了maxlength="1"，在input事件触发的瞬间仍然可以读取到完整的未截断内容，你可以直接复用之前写的OTP拆分填充逻辑：

// 获取所有6位OTP输入框
const otpInputs = document.querySelectorAll('.otp-input');

// 给所有输入框绑定input事件，适配用户聚焦任意输入框触发填充的场景
otpInputs.forEach(input => {
  input.addEventListener('input', (e) => {
    const inputValue = e.target.value.trim();
    // 匹配6位数字的OTP格式
    if (/^\d{6}$/.test(inputValue)) {
      // 逐位填充到对应输入框
      inputValue.split('').forEach((digit, idx) => {
        if (otpInputs[idx]) otpInputs[idx].value = digit;
      });
      // 焦点跳转到最后一位输入框
      otpInputs[otpInputs.length - 1].focus();
      e.preventDefault();
    }
  });
});

方案2：添加标准OTP填充属性 #

给所有OTP输入框添加autocomplete="one-time-code"属性，这是W3C标准定义的一次性验证码专属属性，iOS Safari 12及以上版本会自动识别连续的同属性输入组，部分系统版本会直接自动逐位填充到多个输入框中，无需额外逻辑：

<input type="text" class="otp-input" maxlength="1" autocomplete="one-time-code" inputmode="numeric">
<input type="text" class="otp-input" maxlength="1" autocomplete="one-time-code" inputmode="numeric">
<input type="text" class="otp-input" maxlength="1" autocomplete="one-time-code" inputmode="numeric">
<input type="text" class="otp-input" maxlength="1" autocomplete="one-time-code" inputmode="numeric">
<input type="text" class="otp-input" maxlength="1" autocomplete="one-time-code" inputmode="numeric">
<input type="text" class="otp-input" maxlength="1" autocomplete="one-time-code" inputmode="numeric">

兜底兼容建议 #

如果部分旧版本iOS系统存在input事件触发异常，可以额外监听beforeinput事件作为兜底，该事件会在内容插入到输入框之前触发，可通过e.data拿到完整的填充内容。 #

内容的提问来源于stack exchange，提问作者Darrell Snowden