求助：AG Grid的cellKeyPress事件无法捕获F1-F12功能键

问题原因 #

AG Grid的cellKeyPress事件仅在单元格处于可编辑状态且输入可打印字符时触发，F1-F12这类功能键属于非打印键，因此无法被该事件捕获。

解决方案 #

方法1：使用AG Grid内置的gridKeyDown事件

直接绑定网格的gridKeyDown事件，该事件会捕获网格范围内所有按键操作，包括功能键：

修改AG Grid组件模板：

<ag-grid-angular 
  style=" height: calc(65vh - 230px); width: 100%; margin-top: 10px;" 
  class="ag-theme-alpine"
  [columnDefs]="columnDefs" 
  [frameworkComponents]="frameworkComponents" 
  (gridReady)="onGridReady($event)"
  (cellKeyPress)="onCellKeyPress($event)"
  (gridKeyDown)="onGridKeyDown($event)"> <!-- 新增gridKeyDown事件 -->
</ag-grid-angular>

添加事件处理函数：

onGridKeyDown(e) {
  const pressedKey = e.event.key;
  // 匹配F1-F12按键
  if (/^F\d{1,2}$/.test(pressedKey)) {
    console.log(`You Press ${pressedKey}`);
    // 编写自定义业务逻辑
    switch(pressedKey) {
      case 'F1':
        // 执行F1对应的业务操作
        break;
      case 'F2':
        // 执行F2对应的业务操作
        break;
      // 扩展其他功能键逻辑
    }
  }
}

方法2：阻止AG Grid默认功能键行为（可选）

如果AG Grid内置的功能键逻辑（比如F2默认进入编辑模式）和你的自定义逻辑冲突，可以通过suppressKeyEvent配置阻止默认行为：

在组件中定义gridOptions：

gridOptions = {
  suppressKeyEvent: (params) => {
    const pressedKey = params.event.key;
    // 对F1-F12按键阻止AG Grid默认处理
    return /^F\d{1,2}$/.test(pressedKey);
  }
}

然后在模板中绑定[gridOptions]="gridOptions"即可。

方法3：全局监听keydown事件（适用于需全局响应的场景）

如果需要在页面任意位置按下功能键都触发逻辑，但要判断焦点是否在AG Grid内：

ngOnInit() {
  document.addEventListener('keydown', (event) => {
    const pressedKey = event.key;
    // 检查当前焦点是否在AG Grid单元格内
    const isInGridCell = document.activeElement?.closest('.ag-cell');
    if (isInGridCell && /^F\d{1,2}$/.test(pressedKey)) {
      console.log(`You Press ${pressedKey}`);
      // 执行自定义逻辑
    }
  });
}

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