HTML表单:填写文本字段后，重点关注复选框 [英] HTML forms: focus on checkbox after completing text field

问题描述

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

Look at this HTML form and notice how it has a checkbox between text fields:

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

I tried to fill it up with Chrome on mobile and noticed an unexpected problem: if the user types into a text field, and then moves to the next field by pressing the blue "done" button in an Android keyboard, focus will jump over the checkbox into the next text field. This would be fine, except for the fact that the user never even sees the checkbox and thus may leave it unintentionally unchecked:

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

Is it possible to force focus on the checkbox field or something like that? If there is no technical solution, I'll be happy to accept a UX solution.

<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>

推荐答案

change事件& .focus()

尝试在[name=text3]上注册change事件，并在[name=vehicle]上触发.focus().当用户键入[name=text3]然后在其他位置单击时，在[name=vehicle]

change Event & .focus()

Try registering a change event on [name=text3] and trigger a .focus() on [name=vehicle]. When user has typed into [name=text3] then clicks elsewhere, a .focus() is triggered on [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>

这篇关于HTML表单:填写文本字段后，重点关注复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！