如何在Blazor Server EditForm提交前实时检测文本框内容变更？

默认的InputText组件只会在失去焦点时触发字段变更事件，要实现类似WinForms的实时触发效果，可以用以下两种简单方法：

方法一：自定义实时更新的InputText组件 #

继承原生InputText，重写渲染逻辑，绑定oninput事件实现输入时实时同步值：

public class InputTextRealTime : InputText
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "input");
        builder.AddAttribute(1, "type", "text");
        builder.AddAttribute(2, "class", CssClass);
        builder.AddAttribute(3, "value", CurrentValueAsString);
        // 绑定input事件，每输入一个字符就同步值
        builder.AddAttribute(4, "oninput", EventCallback.Factory.CreateBinder<string>(this, val => CurrentValueAsString = val, CurrentValueAsString));
        builder.CloseElement();
    }
}

在页面里替换原InputText为自定义组件，按钮禁用状态绑定EditContext.IsModified()：

<EditForm EditContext="@EditContext">
    <InputTextRealTime @bind-Value="SomeModel.Text"></InputTextRealTime>
    <button type="submit" disabled="@(!EditContext.IsModified())">Update</button>
</EditForm>

方法二：直接用原生input手动通知EditContext #

不用自定义组件，直接使用原生input，在oninput事件里更新模型值并主动告知EditContext字段已变更：

<EditForm EditContext="@EditContext">
    <input type="text" 
           value="@SomeModel.Text"
           @oninput="@(e => {
               SomeModel.Text = e.Value.ToString();
               // 主动通知EditContext字段修改状态
               EditContext.NotifyFieldChanged(FieldIdentifier.Create(() => SomeModel.Text));
           })" />
    <button type="submit" disabled="@(!EditContext.IsModified())">Update</button>
</EditForm>

两种方法核心逻辑一致：通过监听input事件（用户每输入一个字符就触发），实时同步模型值并通知EditContext，这样OnFieldChanged事件会实时触发，EditContext.IsModified()状态也会跟着实时更新，按钮就能根据输入状态实时启用或禁用。

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