移动端Chrome浏览器：点击Next按钮时表单元素Tab聚焦异常问题

看起来你碰到了移动端Chrome表单焦点导航的典型问题——虚拟键盘的Next按钮并不总是严格遵循DOM顺序跳转，尤其是对<select>这类非文本输入控件。下面是几个针对性的解决方案：

1. 显式指定tabindex强制焦点顺序 #

默认情况下，浏览器会按DOM元素的出现顺序处理焦点，但移动端Chrome有时会“智能跳过”它认为非连续输入的控件（比如<select>）。给每个表单元素按顺序设置tabindex，可以强制浏览器遵循你想要的导航逻辑：

<form>
  <input type="text" tabindex="1">
  <select tabindex="2">
    <!-- 选项内容 -->
  </select>
  <select tabindex="3">
    <!-- 选项内容 -->
  </select>
  <input type="text" tabindex="4">
  <button type="submit" tabindex="5">提交</button>
</form>

注意：tabindex的值不需要连续，但要保证按你期望的顺序递增，避免使用0以下的负值（会让元素无法通过键盘聚焦）。

2. 调整表单元素属性减少浏览器干扰 #

有时候Chrome移动端会根据输入框的type或autocomplete属性调整焦点跳转逻辑：

• 确保你的<input>没有设置特殊的autocomplete值（比如autocomplete="one-time-code"这类触发特殊键盘的类型），避免浏览器干扰焦点顺序；
• 如果业务允许，给<select>添加required属性，让浏览器将其视为表单流程中必须交互的环节，减少被跳过的概率：

<select tabindex="2" required>
  <!-- 选项内容 -->
</select>

3. 手动监听事件完全掌控焦点跳转 #

如果上面的方法无效，可以通过JavaScript监听虚拟键盘的Next按钮（本质是触发Enter键），手动指定下一个聚焦元素：

// 获取表单元素
const firstInput = document.querySelector('input:first-of-type');
const firstSelect = document.querySelector('select:first-of-type');
const secondSelect = document.querySelector('select:nth-of-type(2)');
const secondInput = document.querySelector('input:last-of-type');
const submitBtn = document.querySelector('button[type="submit"]');

// 第一个输入框跳转至第一个select
firstInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    firstSelect.focus();
  }
});

// 第一个select跳转至第二个select
firstSelect.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    secondSelect.focus();
  }
});

// 第二个select跳转至第二个输入框
secondSelect.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    secondInput.focus();
  }
});

// 第二个输入框跳转至提交按钮（可选，若需保留默认提交可删除此段）
secondInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    submitBtn.focus();
  }
});

这个方法完全掌控了焦点跳转逻辑，适合对表单交互有严格要求的场景。

额外检查点 #

• 确保所有表单元素都在同一个<form>标签内，没有嵌套错误或使用form属性关联到其他表单；
• 检查是否有CSS或JavaScript代码意外修改了元素的tabindex或focusable状态。

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