HTML5 автофокус потерян на одностраничных сайтах

Question

Интересно, есть ли у кого-то ответ на эту дилемму? Когда у вас есть автофокус, установленный на входном элементе, который не находится в секции посадки страницы, автофокусировка теряется, когда пользователь щелкает тег меню, чтобы перейти в этот раздел. (Например, раздел контакт там, где, вероятно, будет форма) ...

Answer 1

autofocus attribute -

позволяет указать, что элемент формы должен иметь фокус ввода когда страница загружается, если пользователь переопределяет его, например, введя в себя один элемент управления . Только один элемент формы в документе может иметь атрибут автофокуса , который является булевым.

Предназначен для запроса пользовательских агентов, чтобы дать первоначальный фокус в поле формы при загрузке страницы, обеспечивая менее «встряске» и более контролируемый опыт пользователей вспомогательных технологий по сравнению с предыдущими решениями на основе JavaScript - которые часто «воровали «фокус после того, как пользователь уже начал перемещаться по документу.

Проблемы с помощью этого атрибута в вашем случае являются два fold-

1. событие загрузки страницы будет только стрелять один раз, и не срабатывает снова при перемещении фокуса на новую «страницу» внутренне в тот же документ

2. Недопустимо иметь более одного элемента внутри одного документа - в этом случае весь документ одной страницы - который имеет элемент автофокуса.

Что вам нужно сделать, это использовать native JavaScript focus method на элементе формы вашего определения в новой области видового экрана.

Если у вас есть ссылка на новый элемент или страницу «страница», вы можете использовать атрибут класса или данных, чтобы указать нужный элемент, используя querySelector method или jQuery.

Что-то как-

var firstElement = pageContainer.querySelector('.focus-field'); 

if (firstElement) { 
    firstElement.focus(); 
} 

В качестве альтернативы вы могли бы просто использовать селектор элемента для выбора первой формы element-

var firstElement = pageContainer.querySelector('input, select'); 

if (firstElement) { 
    firstElement.focus(); 
} 

Имейте в виду, что в этом случае оно является недействительным фокусировать скрытый ввод (по надежде очевидным причинам), и если вы захотите использовать это решение, лучше всего использовать querySelectorAll method и пропустить цикл - проверка того, что тип не скрыт и не выйдет из цикла на первом действительном элементе для фокусировки. Или просто используйте селектор атрибутов и выберите только входы типа текста.

Если вы используете jQuery, вы можете использовать not function, чтобы исключить скрытые входы от выбранных элементов.