Angular项目中ag-grid在IE下小键盘句号键无响应问题求助

这个IE的兼容性坑我之前踩过！核心原因是IE对小键盘按键的keypress事件处理逻辑和Chrome完全不同——当NumLock开启时，小键盘的句号键在IE里不会触发keypress事件，反而得通过keydown事件来捕获。

给你几个具体的解决步骤：

1. 替换事件监听：用keydown替代keypress #

放弃原来的keypress监听，改用keydown，因为它能捕获所有物理按键的键码，包括IE里小键盘的特殊按键，兼容性更强。

2. 精准匹配允许的按键码 #

IE里不同位置的数值按键对应不同的keyCode，你需要把这些都纳入判断范围：

• 主键盘区域：数字48-57、减号189、句号190
• 小键盘区域：数字96-105、减号109、句号110

3. 自定义编辑器的完整示例 #

如果用的是ag-grid的自定义单元格编辑器，修改后的事件逻辑大概是这样：

// 在自定义编辑器的init方法里替换事件监听
init(params: ICellEditorParams) {
  // ... 其他初始化代码
  this.eInput = document.createElement('input');
  this.eInput.type = 'number';

  // 移除原来的keypress监听，换成keydown
  this.eInput.addEventListener('keydown', (event: KeyboardEvent) => {
    const allowedKeyCodes = [
      // 主键盘区域
      48,49,50,51,52,53,54,55,56,57, 189, 190,
      // 小键盘区域
      96,97,98,99,100,101,102,103,104,105, 109, 110
    ];

    // 如果是允许的按键，触发编辑并允许输入
    if (allowedKeyCodes.includes(event.keyCode)) {
      // 若还未进入编辑状态，主动触发ag-grid的编辑
      if (!params.api.getEditingCells().length) {
        params.api.startEditingCell({
          rowIndex: params.rowIndex,
          colKey: params.column.colId
        });
      }
      return;
    }

    // 其他按键阻止默认行为（可选）
    event.preventDefault();
  });

  // ... 其他代码
}

额外注意点 #

• 如果用的是ag-grid内置的numericCellEditor，你需要自定义一个编辑器来覆盖它的事件逻辑，因为内置编辑器可能也依赖keypress事件。
• IE里keyCode和charCode的区分很严格，keydown事件里用keyCode才是准确的，keypress的charCode对小键盘按键可能返回0。

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