Blazor文本框字数统计事件仅在调试模式下正常运行问题求解

问题根因 #

• Blazor原生@bind对输入框的默认同步时机是onchange事件，只有当输入框失去焦点时，才会把输入内容同步到绑定的text变量
• @onkeypress事件的触发时机早于@bind的默认同步时机，触发WordsLeft方法时，拿到的还是上一次同步的旧text值，所以计算出来的词数不会更新
• 调试模式下断点打断了正常执行时序，刚好等来了绑定值同步，才会出现调试时功能正常的假象

修复方案 #

选以下任意一种方案即可修复：

方案1：修改@bind同步时机（最简便） #

将@bind的同步时机指定为每次输入就同步，同时把触发统计的事件换成oninput，覆盖所有输入变更场景（包括粘贴、剪切、输入法输入等onkeypress监听不到的操作）：

<div class="row">
    <textarea id="test" class="form-control" @bind="text" @bind:event="oninput" @oninput="WordsLeft"></textarea>
    <p>Words left: @(MaxCount - CurrentWordCount)</p>
</div>

@code {
    [Parameter]
    public int MaxCount { get; set; }

    [Parameter]
    public string text { get; set; } = string.Empty;

    public int CurrentWordCount;

    public void WordsLeft()
    {
        // 新增过滤参数，避免连续空格、首尾空格导致统计结果错误
        CurrentWordCount = text.Split(' ', StringSplitOptions.RemoveEmptyEntries).Length;
    }
}

方案2：手动实现值绑定 #

如果需要更灵活的控制逻辑，可以放弃默认@bind，手动处理输入同步和统计：

<div class="row">
    <textarea id="test" class="form-control" value="@text" @oninput="HandleInput"></textarea>
    <p>Words left: @(MaxCount - CurrentWordCount)</p>
</div>

@code {
    [Parameter]
    public int MaxCount { get; set; }

    [Parameter]
    public string text { get; set; } = string.Empty;

    public int CurrentWordCount;

    public void HandleInput(ChangeEventArgs e)
    {
        text = e.Value?.ToString() ?? string.Empty;
        CurrentWordCount = text.Split(' ', StringSplitOptions.RemoveEmptyEntries).Length;
    }
}

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