Как заставить tabIndex (поле ввода) начинаться сверху при загрузке страницы - Jquery - PullRequest
Новая
       49

Как заставить tabIndex (поле ввода) начинаться сверху при загрузке страницы - Jquery

0 голосов
/ 16 марта 2020

Хорошо, я действительно не могу понять это. Когда одна из моих страниц загружена, поле поиска автоматически фокусируется. Это нарушает порядок вкладок страницы. Есть пропущенные ссылки и другие ссылки, которые находятся в правильном порядке табуляции перед полем поиска, но по какой-то причине поле ввода ВСЕГДА получает первый фокус. После того, как вы ушли, правильная последовательность вкладок, но затем либо пропускает поле поиска при повторной вкладке, либо начинает вкладку в поле ввода. Ниже приведен фрагмент элемента: 

<input id="search-input" quicksearch="false" type="text" autocomplete="off" name="q" aria-label="Search" value="" placeholder="Search..." tabindex="1">

Я вручную добавил туда tabindex = "1", чтобы проверить его, но все равно не могу выполнить то, что ищу. Он частично исправляет это, фактически начиная вкладку сверху, но затем не вписывается в порядок вкладок, который является проблемой. Я добавил tabindex = "0", "-1", "2", но каждый раз это поле ввода фокусируется на первом. Я удалил автофокус из поля ввода с помощью jQuery и могу убедиться, что он его удалил, но безрезультатно. Я проверил все индексы вкладок других элементов, и они либо "0", либо "-1".

За пределами поля ввода, которое фокусируется первым, порядок табуляции точен. Я просто хочу, чтобы табуляция начиналась в верхней части страницы И работала логичным путем И включала поле ввода, как и должно!

Неужели jQuery недостаточно быстр, чтобы удалить автофокус, прежде чем он будет включен в жесткий HTML?

1 Ответ

0 голосов
/ 16 марта 2020

Вы можете сделать blur(), чтобы расфокусировать элемент управления вводом. 

function focusInput() {
  document.getElementById('search-input').focus();
}
function blurInput() {
  document.getElementById('search-input').blur();
}
<input type="text" id="search-input" value="Sample">
<br><br>
<button type="button" onclick="focusInput()">Click to gain focus</button>
<button type="button" onclick="blurInput()">Click to lose focus</button>
...