angular - 在 IE11 中触发关键事件以获取 Angular

Question

我正在尝试测试当 using 在输入中按下 Enter 时会发生特定的事件链。在我的测试文件中，我有一个简单的方法可以触发输入元素上的 Enter 键；

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

它在 Chrome 中工作正常，但如果你在 IE 中尝试这个，你会得到一个很好的错误提示；

Object doesn't support this action

这是因为 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);
  }

Be aware though document.createEvent("KeyboardEvent") is deprecated. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/initKeyEvent