.focus() 事件行为 Javascript

Question

我有这三个选项卡：

当用户使用鼠标并单击其中一个选项卡时（本例中为合规性说明），选项卡页面上的适当元素获得焦点并适当突出显示。

但是，如果用户使用键盘并按 Tab 键突出显示他们想要的选项卡，然后按 Enter 键 select 该选项卡，则选项卡式页面将获得焦点。然后，通过 JavaScript，我将焦点设置到该选项卡式页面上的适当元素（通过对该元素使用 .focus() 方法），示例中相同的 asp:DropDownList 表现得像用户不仅 select 编辑了该元素，但点击了它：

如果您随后手动按下 Enter 或 Tab，下拉列表将关闭，元素看起来就像用户单击选项卡而不是使用键盘时那样：

那么，有没有一种“简单”的方法，在我使用 .focus() 方法之后，模拟 Enter 或 Tab 击键，使元素获得焦点但不触发下拉列表？还是有其他方法，使用 .focus() 方法或其他一些方法，以防止在使用键盘导航页面时触发下拉列表？

Answer 1

您提到的行为似乎与按键事件有关。这是一个示例 - 当您在文本字段中键入时，它应该将焦点设置在下拉列表上。当您在文本字段中按 Enter 键时，请注意第一个示例（使用 keydown）的行为与您报告的类似。第二个例子（使用按键）没有。

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'>

.focus() 事件行为 Javascript

.focus() event behavior with Javascript

javascript

keyboard

focus