Поведение события .focus() с Javascript
У меня есть эти три вкладки:
Когда пользователь использует мышь и щелкает одну из вкладок (в данном примере «Примечания о соответствии»), соответствующий элемент на странице с вкладками получает фокус и выделяется соответствующим образом.
Однако, если пользователь использует клавиатуру и нажимает клавишу Tab, чтобы выделить нужную вкладку, а затем нажимает клавишу Enter, чтобы выбрать эту вкладку, страница с вкладками получает фокус. Затем с помощью JavaScript я устанавливаю фокус на нужный элемент на этой странице с вкладками (используя метод .focus() для этого элемента), и тот же asp:DropDownList в примере ведет себя так, как будто пользователь не только выбрал элемент, но и кликнул по нему:
Если вы затем нажмете Enter или Tab вручную, раскрывающийся список закроется, и элемент будет выглядеть так, как если бы пользователь щелкнул вкладку, а не с помощью клавиатуры:
Итак, есть ли «простой» способ после того, как я использую метод .focus(), чтобы затем имитировать нажатие клавиши Enter или Tab, чтобы элемент имел фокус, но не запускал раскрывающийся список? Или есть другой способ, используя метод .focus() или какой-либо другой подход, чтобы предотвратить запуск раскрывающегося списка при использовании клавиатуры для навигации по странице?
document.getElementById("ContentPlaceHolder1_ddlIncidents").focus();
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поведение, о котором вы упоминаете, похоже, связано с событием нажатия клавиши. Вот пример: когда вы вводите текстовое поле, фокус должен быть на раскрывающемся списке. Когда вы нажмете ввод в текстовом поле, обратите внимание, что первый пример (с использованием нажатия клавиши) ведет себя аналогично тому, что вы сообщили. Второй пример (с использованием нажатия клавиши) не работает.
document.querySelector('#typeHere').addEventListener("keydown", (e) => {
document.querySelector('#focusMe').focus();
});
document.querySelector('#typeHere2').addEventListener("keypress", (e) => {
document.querySelector('#focusMe2').focus();
});<select id='focusMe'>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
<input id='typeHere' >
<br><br>
<select id='focusMe2'>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
<input id='typeHere2'>Отлично, это исправило! Я использовал «keydown» вместо «keypress». Рад, что ответ оказался действительно простым! Благодарю вас!
Не беспокойтесь, Джим. Я бы просто попросил, чтобы в следующий раз, пожалуйста, опубликуйте свой код, так как это была удачная догадка (часть, которая показала, что вы использовали keydown, была бы здесь полезна). Заботиться!
Какой код вы используете в настоящее время, что заставляет его открывать раскрывающийся список?