Запуск ключевого события в IE11 для угловых

Question

Я пытаюсь проверить, что при использовании нажатия Enter на входе происходит определенная цепочка событий. В моем тестовом файле у меня есть простой метод, который вызывает клавишу Enter на элементе ввода;

  function TriggerEnterEventOnInput() {
    const event = new KeyboardEvent('keyup', { 'key': 'Enter' });
    fixture.nativeElement.querySelector('input').dispatchEvent(event);
  }

Он отлично работает в Chrome, но если вы попробуете это в IE, вы получите приятную ошибку:

Объект не поддерживает это действие

Это потому, что IE не поддерживает конструктор KeyboardEvent. Есть ли другой способ вызывать определенные ключевые события, желательно без использования плагинов, таких как JQuery?!

Answer 1

Поскольку конструктор KeyboardEvent недоступен в IE, вы можете использовать следующий фрагмент кода, который работает во всех браузерах.

 TriggerEnterEventOnInput() {

    let event: KeyboardEvent;

    try {
      event = new KeyboardEvent('keyup', { 'key': 'Enter', 'bubbles': true });
    }
    catch {
      event = document.createEvent("KeyboardEvent");
      event.initKeyboardEvent(
          'keyup', // event name e.g. keyup, keydown, keypress
          false, // canBubbleArg
          false, // cancelableArg
          null, // viewArg
          'Enter', // your keyboard press value
          0, // locationArg
          '', // modifiersListArg
          false, // repeat
          '' // locale
      );
    }
    fixture.nativeElement.querySelector('input').dispatchEvent(event);
  }

Имейте в виду, что document.createEvent("KeyboardEvent") устарело.https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/initKeyEvent

Answer 2

Я покажу, как обрабатывать различные события клавиатуры.Я также покажу, как определить, какая конкретная клавиша была нажата пользователем.

Во-первых, нам нужно немного подумать, чтобы убедиться, что мы понимаем разницу между тремя различными типами общих событий клавиатуры:

• keydown: клавиша была нажата, но еще не отпущена.Действие по умолчанию еще не было выполнено.
• нажатие клавиши: клавиша была нажата, и символ зарегистрирован.Это событие будет срабатывать непрерывно, если удерживать клавишу нажатой.
• keyup: нажатая клавиша была отпущена.

Допустим, мы создаем веб-приложение и хотим создать интерактивный учебникчто мы сделали доступным через интуитивное сочетание клавиш.В любом месте приложения наши пользователи должны иметь возможность вызывать наш виджет справки с помощью комбинации клавиш Ctrl-H.

jQuery

$(document).keydown(function(event) {
    if (event.ctrlKey && event.which === 72) {
       // open help widget
    }
});

Web API

< document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.which === 72) {
       // open help widget
    }
});>

Ничего явно не получается, в данном случае, с jQuery.Даже синтаксис почти идентичен между Web API и jQuery.

Регистрация для других событий клавиатуры происходит по аналогичной схеме:

jQuery

$(someElement).keypress(function(event) {
    // ...
});

$(someElement).keyup(function(event) {
    // ...
});

Web API

someElement.addEventListener('keypress', function(event) {
    // ...
});

someElement.addEventListener('keyup', function(event) {
    // ...
});

Для получения дополнительной информации о свойствах событий клавиатуры и совместимости браузера