AG-Grid评论单元格输入时如何实时获取剩余字符数

问题分析 #

当前使用agLargeTextCellEditor作为Comments列的单元格编辑器，已设置最大字符数2000，但仅能在单元格失去焦点时获取剩余字符数。onCellClicked、onCellValueChanged事件无法捕获输入过程中的实时内容——因为这类事件仅在编辑状态切换或值确认后触发，而非输入操作进行时。

解决方案 #

通过AG-Grid的onCellEditingStarted事件获取编辑器实例，针对编辑器内部的textarea绑定input事件，实时计算并更新剩余字符数。

代码修改步骤 #

1. 新增onCellEditingStarted事件处理逻辑
   在gridOptions_updateddocumentation中添加该事件，用于捕获编辑启动时机并绑定输入监听：

onCellEditingStarted: function(event) {
    // 仅处理Comments列的编辑事件
    if (event.column.colId === 'Comments') {
        // 获取当前单元格的编辑器实例
        const editorInstance = event.api.getCellEditorInstances({
            rowNodes: [event.node],
            columns: [event.column]
        })[0];
        
        if (editorInstance) {
            // 获取编辑器内部的textarea元素
            const textarea = editorInstance.getGui().querySelector('textarea');
            const maxLength = 2000;
            
            // 初始化显示剩余字符数
            updateRemainingChars(textarea.value.length, maxLength);
            
            // 绑定input事件，实时监听输入变化
            textarea.addEventListener('input', function() {
                updateRemainingChars(this.value.length, maxLength);
            });
        }
    }
}

2. 定义剩余字符数更新函数
   单独封装函数统一处理弹窗内容更新：

function updateRemainingChars(currentLength, maxLength) {
    const remaining = maxLength - currentLength;
    $("#myPopupUD").html(`${remaining} characters remaining of ${maxLength} characters`);
    const popup = document.getElementById("myPopupUD");
    popup.classList.add("show");
}

3. 修正cellEditorParams的maxLength类型（可选）
   将原代码中字符串类型的'2000'改为数字类型，避免计算时出现类型错误：

cellEditorParams: {
    maxLength: 2000
}

4. 优化原onCellClicked事件逻辑（可选）
   移除原事件中关于剩余字符数的计算逻辑，避免重复触发：

onCellClicked: function (event) {
    Selectedcolumn = event.column.colId;
    if (event.column.colId == 'Comments') {
        Selectedcolumn = event.column.colId;
    }
}

原理说明 #

• onCellEditingStarted在单元格进入编辑状态时触发，此时可直接获取编辑器实例。
• agLargeTextCellEditor的底层GUI元素是textarea，通过getGui()方法获取该元素后，绑定input事件即可监听每一次输入操作。
• 实时计算当前输入长度与最大长度的差值，同步更新弹窗内容，实现剩余字符数的实时显示。

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