如何在Blazor中实现类似jQuery的全局textarea键盘事件监听？

问题背景 #

在jQuery中可以通过$(document).ready全局绑定所有textarea的键盘事件来更新字数统计，但Blazor作为单页应用，DOM元素是动态渲染的，document.ready无法覆盖后续新增的元素；而使用OnAfterRenderAsync需要逐个组件绑定，操作繁琐。我们需要一种类似jQuery的全局方案，只需引入脚本即可自动处理所有（包括动态新增的）textarea。

解决方案：事件委托+初始化触发 #

利用DOM事件委托绑定全局事件，配合Blazor渲染完成后的初始化调用，即可实现全局自动处理，无需逐个组件绑定。

1. 编写全局JavaScript脚本

在wwwroot目录下创建textarea-counter.js（或直接在index.html的<script>标签中写入）：

// 全局事件委托：捕获所有textarea的keyup事件（兼容动态新增元素）
document.addEventListener('keyup', function(e) {
  if (e.target.tagName === 'TEXTAREA') {
    updateTextareaCounter(e.target);
  }
});

// 初始化已渲染的textarea字数统计
window.initTextareaCounters = function() {
  document.querySelectorAll('textarea').forEach(textarea => {
    updateTextareaCounter(textarea);
  });
};

// 核心字数统计更新逻辑
function updateTextareaCounter(textarea) {
  const maxLength = textarea.getAttribute('maxlength');
  if (!maxLength) return; // 未设置maxlength的textarea跳过处理
  
  const currLength = textarea.value.length;
  const spanId = textarea.id + '_counter';
  const counterElement = document.getElementById(spanId);
  
  if (counterElement) {
    counterElement.textContent = maxLength - currLength; // 修正原jQuery的val()：span是普通元素，用textContent更新内容
  }
}

2. 在Blazor中触发初始化

在全局布局组件（如MainLayout.razor）中，通过OnAfterRenderAsync调用初始化函数，确保Blazor渲染完成后，初始的textarea能正确显示字数统计：

@inject IJSRuntime JS

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 首次渲染后初始化所有textarea统计
        if (firstRender)
        {
            await JS.InvokeVoidAsync("initTextareaCounters");
        }
        // 若存在动态加载组件的场景，可移除注释，每次渲染后都触发初始化
        // await JS.InvokeVoidAsync("initTextareaCounters");
        
        await base.OnAfterRenderAsync(firstRender);
    }
}

3. 页面元素要求

确保textarea满足以下条件：

• 拥有唯一id属性
• 设置了maxlength属性
• 对应字数统计的<span>元素id为[textarea-id]_counter，例如：

<textarea id="content" maxlength="500"></textarea>
剩余字数：<span id="content_counter"></span>

方案优势 #

• 全局生效：只需引入一次脚本，所有现有及后续动态新增的textarea都会自动绑定统计逻辑
• 无需逐个组件处理：避免了OnAfterRenderAsync重复编写绑定代码的繁琐
• 兼容Blazor渲染机制：事件委托不受DOM动态变化影响，初始化调用确保初始元素统计正确

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