У меня есть HTML-форма, и, в частности, на iOS мне нужно запретить пользователю «перемещаться» по входам, когда присутствует модальное окно.
Я заключаю кавычки вокруг «табуляции», потому что на клавиатуре iOS нет стандартной клавиши tab, она использует стрелки «предыдущий/следующий» на панели инструментов над клавиатурой. (см. изображение ниже)
К этим ключам не привязаны события DOM, поэтому чтение в e.keyCode и использование e.preventDefault() не являются вариантами. Любые идеи?
Решение, которое я закончил реализовывать, было примерно следующим:
HTML
<!-- modal content -->
<div class="search-modal">
<input type="search" id="search-input" />
<input type="text" onfocus="refocus('search-input')" style="opacity:0;" />
</div>
<!-- main page content -->
<div class="page-body">
<input type="text" name="fname" />
<input type="text" name="lname" />
<input type="email" name="email" />
<input type="tel" name="phone" />
<!-- ... -->
</div>
JS
function refocus(id){
document.getElementById(id).focus();
}
Всякий раз, когда используется стрелка «следующий», невидимый ввод получает фокус. Он немедленно возвращает фокус на исходный ввод; таким образом предотвращая получение фокуса немодальными входными данными.
К сожалению, у меня нет iOS для тестирования. Но я думаю, вы можете попробовать следующее:
Немного странно, но может сработать =).
ПС. Только что понял. Вы имели в виду, что при наличии модального режима пользователь может переключаться на ввод «под» модальным?
В этом случае вы должны принудительно поставить focus() на первый элемент вашей модальной формы, чтобы «табуляция» работала в вашей новой форме.
$(document).bind('keydown', ...),mousedown,touchstart? Некоторые из этого события уволены? - person spirit schedule 15.07.2016