javascript - 为什么不模拟 Tab 键按下将焦点移动到下一个输入字段？

Question

备注this题。我看到除了触发 tab 按键事件之外还有其他方法，但我仍然想知道为什么触发 tab 按键事件不会将焦点移动到下一个输入字段。

Code Pen

HTML

<textarea></textarea>
<textarea></textarea>
<textarea></textarea>

JS

$('textarea').on('keydown', function(e) {
  if (e.metaKey && e.which === 40) {
    console.log('test');
    $(this).trigger({
      type: 'keypress',
      which: 9
    });
  }
});

Answer 1

因为选项卡事件是用于更改焦点的 native 浏览器事件/操作。 .trigger() 函数只触发分配给它的事件处理程序。请注意，jQuery's site 提供了更多信息:

The .trigger() function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events.

尽管有一个名为 jquery-simulate 的插件来处理这个。也就是说，tab 键改变焦点实际上是网络浏览器中的默认操作。触发浏览器 native 事件并不意味着它将执行默认操作，如 KeyboardEvents 的文档提及:

Note that manually firing an event does not generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.