AgGrid：如何在用户输入时触发字符超限错误提示？

要实现输入过程中达到500字符限制时立即显示提示，不能依赖编辑结束后触发的事件，需要直接监听编辑器输入框的实时输入事件：

实现步骤 #

1. 利用AgGrid的onCellEditingStarted事件，在编辑启动时获取目标列的输入元素
2. 给输入元素绑定input事件，实时检测输入长度
3. 编辑结束时移除事件监听，避免内存泄漏

代码示例 #

// 在网格初始化配置中添加该事件
onCellEditingStarted: (event) => {
  // 仅处理"Default Text"列
  if (event.colDef.headerName !== "Default Text") return;

  // 获取编辑器内的输入元素（适配AgGrid默认文本编辑器）
  const inputElement = event.eEditor.querySelector('.ag-input-field-input');
  if (!inputElement) return;

  // 实时检查字符长度的函数
  const checkLimit = () => {
    const currentLen = inputElement.value.length;
    if (currentLen === 500) {
      this._snackBar.addMessage("Warning: 500 character limit reached", 'x', {
        panelClass: [ENUM.SNACK_BAR.WARNING]
      });
    }
    // 可选：超过限制时自动截断
    else if (currentLen > 500) {
      inputElement.value = inputElement.value.slice(0, 500);
    }
  };

  // 绑定实时输入监听
  inputElement.addEventListener('input', checkLimit);

  // 编辑结束时清理监听
  const cleanup = () => {
    inputElement.removeEventListener('input', checkLimit);
    event.api.removeEventListener('cellEditingStopped', cleanup);
  };
  event.api.addEventListener('cellEditingStopped', cleanup);
}

关键说明 #

• 之前使用的onCellValueChanged、onCellEditingStopped均为编辑结束后触发的事件，无法实现实时检测
• onCellKeyPress仅能捕获按键动作，无法直接获取实时输入值，不如input事件精准
• 通过event.eEditor可以获取到编辑器的DOM容器，再定位到内部的输入元素，从而绑定实时监听

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