HTML-форма: отключить ввод с клавиатуры без побочных эффектов - PullRequest
Новая
       11

HTML-форма: отключить ввод с клавиатуры без побочных эффектов

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

У меня проблема , когда мобильные браузеры автоматически фокусируются на полях формы, когда пользователь нажимает клавишу ввода. Я хочу отключить это «автофокус при входе». У меня есть решение, но решение отключает вкладки между полями. Есть ли лучшее решение?

Вот простая форма, где вы можете продемонстрировать автофокус: 

<form action="/action_page.php" method="get">
    <input name="text1" value="Bla bla"><br>
    <input name="text2" value="Some text"><br>
    <input type="submit" value="Submit">
</form>

Вот моя попытка исправить проблему ( jsfiddle ): 

<form action="/action_page.php" method="get" onkeypress="return handleEnter(event.keyCode);">
    <input name="text1" value="Bla bla"><br>
    <input name="text2" value="Some text"><br>
    <input type="submit" value="Submit">
</form>

window.handleEnter = function(keyCode) {
     if (keyCode == 13) {
         $(':focus').blur(); // intent: to stop auto focus
         return false; // intent: prevent submit
     }
     return true;
}

После того, как вы попробовали это на мобильном устройстве, похоже, что нажатие клавиши ввода (большая синяя кнопка на клавиатуре Android) на самом деле ведет себя как вкладка, пока мы не фокусируемся на последнем фокусируемом элементе формы, и в этот момент он ведет себя как ввод. Если мы добавим tabindex="-1" к каждому полю ввода, мы можем запретить автофокус на мобильном устройстве, но тогда мы также запретим вкладки на рабочем столе. И я полагаю, мы могли бы взломать что-то, что изменяет tabIndex только для мобильных устройств, но ммм, тьфу.

Итак, мой вопрос: можно ли отключить поведение «Автофокус при вводе» на мобильном телефоне ... хорошим способом?

...