HTML-формы: установите флажок после заполнения текстового поля - PullRequest
Новая
       21

HTML-формы: установите флажок после заполнения текстового поля

0 голосов
/ 14 января 2019

Посмотрите на эту HTML-форму и обратите внимание на наличие флажка между текстовыми полями:

screenshot1

Я попытался заполнить его Chrome на мобильном устройстве и заметил неожиданную проблему: если пользователь вводит текстовое поле, а затем нажимает синюю кнопку «Готово» на клавиатуре Android, фокус будет перепрыгнуть через флажок в следующее текстовое поле. Это было бы хорошо, за исключением того факта, что пользователь даже не видит флажок и, таким образом, может непреднамеренно оставить его без проверки:

screenshot2

Можно ли принудительно сфокусироваться на поле флажка или что-то в этом роде? Если нет технического решения, я буду рад принять решение 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>

1 Ответ

0 голосов
/ 14 января 2019

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