如何在IE和PhantomJS中用TypeScript创建KeyboardEvent适配Angular2测试

这问题我之前做Angular项目跨浏览器测试时也踩过坑！老版本浏览器（比如IE、PhantomJS）对标准的KeyboardEvent构造函数支持非常有限，直接用new KeyboardEvent()创建的事件在这些环境里要么丢失属性，要么直接报错，得用兼容的方式生成事件对象。

核心问题原因 #

Chrome等现代浏览器支持ES标准的KeyboardEvent构造函数，能直接传入options配置key等属性，但IE和PhantomJS只支持旧的document.createEvent() API，而且初始化事件的方法参数和现代浏览器差异很大，甚至不会自动设置key这个关键属性。

兼容的事件创建工具函数 #

你可以写一个通用辅助函数，自动适配不同浏览器的事件创建逻辑：

function createKeyboardEvent(key: string, eventType: string = 'keypress'): KeyboardEvent {
  let event: KeyboardEvent;

  // 检测是否支持标准构造函数（现代浏览器）
  if (typeof KeyboardEvent === 'function' && typeof KeyboardEvent.prototype.initKeyboardEvent === 'undefined') {
    event = new KeyboardEvent(eventType, { 
      key,
      bubbles: true,
      cancelable: true
    });
  } else {
    // 兼容IE、PhantomJS等老浏览器
    event = document.createEvent('KeyboardEvent') as KeyboardEvent;
    
    // 老版本initKeyboardEvent的参数顺序需注意，这里兼容主流老浏览器
    (event as any).initKeyboardEvent(
      eventType,
      true,  // bubbles
      true,  // cancelable
      window, // view
      false, // ctrlKey
      false, // altKey
      false, // shiftKey
      false, // metaKey
      0,     // keyCode
      key.charCodeAt(0) // charCode
    );

    // 手动设置key属性，老浏览器的init方法不会自动赋值
    Object.defineProperty(event, 'key', { 
      value: key,
      writable: false
    });
  }

  return event;
}

在测试中使用这个函数 #

把你原来的测试代码替换成用工具函数生成事件：

// 示例：测试数字键输入场景
for (let i = 0; i <= 9; i++) {
  const ke = createKeyboardEvent(`${i}`);
  const result = component.onDateKeypress(ke);
  // 根据你的方法逻辑设置预期断言
  expect(result).toBe(true); 
}

额外注意事项 #

• 如果你的onDateKeypress方法还依赖keyCode、charCode这类属性，要确保在initKeyboardEvent里传入正确的值，不同浏览器对这些属性的定义略有差异，比如IE的keypress事件中charCode对应字符的ASCII码。
• PhantomJS 2.x版本可能还需要额外处理事件的which属性，你可以在工具函数里按需添加：Object.defineProperty(event, 'which', { value: key.charCodeAt(0) });
• 建议把这个工具函数放到测试文件顶部，或者抽成共享的测试工具模块，方便所有需要键盘事件测试的地方复用。

内容的提问来源于stack exchange，提问作者Quails4Eva