HTML表单：填写文本字段后，重点关注复选框

Question

查看此HTML表单，并注意它在文本字段之间如何具有一个复选框：

我尝试用移动设备上的Chrome填充它，并注意到一个意外的问题：如果用户在文本字段中键入内容，然后通过按下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()

尝试在change上注册[name=text3]事件，并在.focus()上触发[name=vehicle]。当用户键入[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>