Form input events for Macbook touch bar

Question

Are there any events that trigger on form elements when a user enters input via the MacBook Touch Bar?

Here is a trivial example:

<textarea id="textarea"></textarea>

(function($) {
  $('#textarea')
    .on('keyup', function() {
      console.log('keyup');
    })
    .on('keydown', function() {
      console.log('keydown');
    })
    .on('keypress', function() {
      console.log('keypress')
    });
})(jQuery);

On Safari, when I "type" using the Touch Bar (e.g. tapping on emojis or autosuggested text), I don't see any events in the web inspector console. However, the regular keyboard will fire the keydown, keypress, and keyup events as expected.

Answer 1

It doesn't look like the touch bar triggers key events.

An alternative would be to listen to the input event.

As stated by the relevant MDN documentation, the event is fired whenever the value is changed, which means that it will work when the touch bar changes the input/textarea value.

The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed.

Usage:

document.querySelector('textarea').addEventListener('input', function (event) {
    // ...
});

or...

$('textarea').on('input', function (event) {
  // ...
});