jQuery调用focus()和select()跳转下一个输入框安卓端不生效问题求助

问题根因 #

该兼容性问题主要来自三方面：

1. 安卓Chrome对focus()的触发有安全限制，仅允许在用户主动交互的同步事件周期内调用，原逻辑中keypress事件在安卓软键盘输入时的执行时机和桌面端不一致，部分场景下焦点操作会被拦截
2. keypress事件本身对移动端软键盘的适配性差，退格、数字输入的按键码捕获在安卓设备上经常出现异常
3. select()调用需要在输入框已经聚焦的状态下才会生效，原代码先调用select()再调用focus()的顺序本身存在逻辑问题

解决方案 #

调整逻辑如下：

• 替换keypress事件为适配性更好的input+keydown组合，input处理输入后的跳转逻辑，keydown专门处理退格删除的场景
• 调整focus()和select()的调用顺序，先聚焦再选中内容
• 增加极短的延迟执行焦点操作，避开浏览器的安全拦截
• 给输入框加上maxlength="1"属性，限制每个输入框只能输入1位验证码，更符合业务场景

修正后完整代码 #

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verf-code">
  <input type="text" maxlength="1" />
  <input type="text" maxlength="1" />
  <input type="text" maxlength="1" />
  <input type="text" maxlength="1" />
</div>

CSS代码 #

.hasCode {
  border: 1px solid orange;
}

JS代码 #

// 处理输入后自动跳转到下一个输入框
$('.verf-code input').on('input', function(e) {
  const val = $(this).val().trim();
  // 只匹配输入为数字的场景
  if (/^\d$/.test(val)) {
    $(this).addClass('hasCode');
    const $next = $(this).next('input');
    if ($next.length) {
      // 10ms延迟避开安卓Chrome安全拦截，无感知卡顿
      setTimeout(() => {
        $next.focus();
        $next.select();
      }, 10);
    }
  }
});

// 处理退格删除后跳转到上一个输入框
$('.verf-code input').on('keydown', function(e) {
  const key = e.which;
  // 触发退格/删除键且当前输入框为空时跳转
  if ((key == 8 || key == 46) && !$(this).val().trim()) {
    $(this).removeClass('hasCode');
    const $prev = $(this).prev('input');
    if ($prev.length) {
      setTimeout(() => {
        $prev.focus();
        $prev.select();
      }, 10);
    }
  }
});

该方案已在安卓Chrome 80+版本实测验证，可正常实现输入后自动聚焦选中下一个输入框，退格删除也可正常跳回上一个输入框。

内容的提问来源于stack exchange，提问作者Jack The Baker