javascript - Why doesn't simulating a tab keypress move focus to the next input field?

Question

Note this question. I see that there are other approaches besides just triggering the tab keypress event, but I'd still like to know why triggering the tab key press event doesn't move focus to the next input field.

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

Because the tab event is a native browser event/action for changing focus. The .trigger() function only triggers the event handlers that are assigned to it. Note there is more information given from 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.

There is a plug-in for this though called jquery-simulate to handle this. That being said the tab key changing focus is actually a default action in the web browser. Firing a browsers native event does not mean it will do it's default action, as the documentation for KeyboardEvents mentions:

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.