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

查看此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>

最佳答案

变更事件与.焦点()

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

演示版

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>

原文地址：https://www.jb51.cc/html/530392.html