HTML 表单：完成文本字段后关注复选框

Question

看看这个 HTML 表单，注意它在文本字段之间有一个复选框：

我尝试在移动设备上用 Chrome 填充它并注意到一个意想不到的问题：如果用户在文本字段中键入内容，然后按蓝色 "done" 移动到下一个字段Android 键盘上的按钮，焦点将跳过复选框进入下一个文本字段。这很好，除了 用户甚至从未看到复选框 因此可能会无意中将其取消选中：

是否可以强制将焦点放在复选框字段或类似字段上？如果没有技术解决方案，我很乐意接受 UX 解决方案。

<form action="/action_page.php" method="get">
  <input name="text1" value="Some text"><br>
  <input name="text2" value="More text"><br>
  <input name="text3" value="Bla bla"><br>
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input name="text1" value="Some text"><br>
  <input name="text2" value="More text"><br>
  <input name="text3" value="Bla bla"><br>
  <input type="submit" value="Submit">
</form>

Answer 1

change 事件 & .focus()

尝试在 [name=text3] 上注册一个 change 事件并在 [name=vehicle] 上触发一个 .focus()。当用户输入 [name=text3] 然后点击别处时，.focus() 会在 [name=vehicle]

上触发

演示

var blaBla = document.querySelector('[name=text3]');

var bike = document.querySelector('[name=vehicle]');

blaBla.addEventListener('change', goToChk);

function goToChk(e) {
  bike.focus();
}

[name=vehicle]:focus {
  outline: 3px solid red;
}

<form action="/action_page.php" method="get">
  <input name="text1" value="Some text"><br>
  <input name="text2" value="More text"><br>
  <input name="text3" value="Bla bla"><br>
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input name="text1" value="Some text"><br>
  <input name="text2" value="More text"><br>
  <input name="text3" value="Bla bla"><br>
  <input type="submit" value="Submit">
</form>