时间戳

首页 > 解决方案 > 在 IE11 中触发 Angular 的键事件

angular - 在 IE11 中触发 Angular 的键事件

问题描述

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

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

它在 Chrome 中运行良好，但如果你在 IE 中尝试这个，你会得到一个很好的错误提示；

对象不支持此操作

这是因为 IE 不支持 KeyboardEvent 构造函数。有没有其他方法可以触发特定的关键事件，最好不使用 JQuery 之类的插件？！

标签： angularjasmine

解决方案

由于 IE 上没有 KeyboardEvent 构造函数，您可以使用以下适用于所有浏览器的代码段。

 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

推荐阅读