Как можно выполнить автофокусировку на поле формы в iPhone Safari?

#javascript #iphone #html #focus #mobile-safari

#javascript #iPhone #HTML #фокусировка #mobile-safari

Вопрос:

Я пытаюсь автоматически сфокусировать определенное поле формы в браузере Safari на iPhone. Я думал, что это будет довольно просто, но мне не удается заставить это работать. Итак, это на самом деле невозможно или я упускаю что-то сверхочевидное (что я подозреваю)? Вот код, который я использую:

 <!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
   function formfocus() {
      document.getElementById('element').focus();
   }
   window.onload = formfocus;
</script>
</head>
<body>

<form>
<input/>
<input id="element" autofocus/>
<input/>
</form>

</body>
</html>

Вы можете видеть, что я пытаюсь получить фокус дважды, один раз с помощью js и один раз с помощью атрибута HTML «aufofocus» в поле ввода. Ни то, ни другое не помогает. Это работает в браузерах для настольных компьютеров, но когда я открываю страницу на своем iPhone 4, никаких кубиков, то есть мне приходится устанавливать фокус вручную, нажимая на одно из полей формы.

В конечном счете, я хотел бы открыть веб-сайт в мобильном браузере и сфокусироваться на поле формы, включая клавиатуру, открытую для начала ввода.

Спасибо за любую помощь!

Ответ №1:

Согласно этой странице, автофокусировка не поддерживается в iphone / ipad по соображениям удобства использования.

Ответ №2:

Согласно Apple, автофокусировка в iphone не поддерживается. Об этом был комментарий в тикете для WebKit. Комментарий был создан в марте 2019 года и гласит следующее:

«Нам (Apple) нравится текущее поведение, и мы не хотим, чтобы программный фокус вызывал клавиатуру, когда […] программный фокус не был вызван в ответ на жест пользователя».

Источник

Ответ №3:

Попробуйте присвоить элементу ввода тип

 <input type="email" id="element" autofocus/>

и для резервного копирования вы можете использовать

 <script type="text/javascript">
    if (!("autofocus" in document.createElement("input"))) {
      document.getElementById("element").focus();
    }
</script>

1. Спасибо Husar за это, я соответствующим образом обновил код (по URL выше), но, к сожалению, он по-прежнему не работает на iPhone 4 =/

2. Понятия не имею, почему, это должно сработать, проверьте эту статью для получения дополнительных опций => diveintohtml5.org/forms.html вы найдете то, что вам нужно, в разделе Поля автофокусировки

3. @Husar это не поддерживается в мобильном safari — wufoo.com/html5/attributes/02-autofocus.html

Ответ №4:

Попробуйте .focus() внутри setTimeout().

 setTimeout(function() {
jQuery('#element').focus();
}, 500);

Я надеюсь, что это будет работать на всех.