Blazor Server文本域字符计数组件@onkeyup触发后页面不渲染问题

问题根源 #

你当前代码的核心问题是**@bind默认绑定的是onchange事件**，只有当文本域失去焦点时才会更新CommentText变量。而@onkeyup触发时，CommentText还是旧值，导致UI显示的计数无法实时同步。

两种解决方法 #

方法1：最简实现（推荐）

不需要单独维护计数变量，直接在UI中实时计算长度，同时修改绑定事件为oninput实现实时更新：

<div class="d-flex flex-column justify-content-center">
    <textarea @bind="CommentText" @bind:event="oninput" rows="8" cols="50"></textarea>
    <p>Characters: @CommentText.Length</p>
</div>

@code {
    private string CommentText { get; set; } = string.Empty;
}

方法2：保留原有变量和方法

如果需要保留Characters变量和TextUpdate方法，只需修改绑定事件为oninput，同时可以去掉多余的StateHasChanged调用（Blazor会在UI事件后自动刷新UI）：

<div class="d-flex flex-column justify-content-center">
    <textarea @bind="CommentText" @bind:event="oninput" @onkeyup="TextUpdate" rows="8" cols="50"></textarea>
    <p>Characters: @Characters</p>
</div>

@code {
    private string CommentText { get; set; } = string.Empty;
    private string Characters { get; set; } = "0";

    private void TextUpdate()
    {
        Characters = CommentText.Length.ToString();
    }
}

关键说明 #

• @bind:event="oninput"会让Blazor在每次输入（键盘敲击、粘贴、删除等）时立即更新绑定的CommentText变量，而不是等待失去焦点。
• Blazor在UI事件（如@onkeyup）处理完成后会自动调用StateHasChanged刷新UI，所以手动调用是多余的。

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