阻止Blazor WebAssembly按回车键提交表单有什么更优雅的实现方案？

你遇到的现象本质是HTML表单的默认行为——当<form>标签内存在输入框且没有显式指定提交处理逻辑时，按下回车键会自动触发表单提交，触发页面重载。你用的隐藏禁用按钮是利用浏览器规则的临时方案，下面是几种更优雅的实现方式：

• 方案1：阻止表单默认提交行为
  直接在form标签上添加@onsubmit:preventDefault特性即可全局禁用表单的默认提交刷新，不需要额外修改其他逻辑：

<form @onsubmit:preventDefault>
  <input type="text" class="form-text" @bind-value:event="oninput" @onkeydown="Enter" @bind-value="@searchString" />
  <button type="button" class="btn btn-primary" @onclick="Search">Search</button>
</form>

如果你的Enter方法还没加阻止默认事件的逻辑，补充一行e.PreventDefault()更稳妥：

private void Enter(KeyboardEventArgs e)
{
    if (e.Key == "Enter")
    {
        e.PreventDefault();
        Search();
    }
}

• 方案2：使用Blazor原生EditForm组件*（推荐优先使用该方案）*
  Blazor提供的EditForm组件默认不会触发页面重载，还自带表单校验能力，按下回车键会自动触发绑定的提交方法，不需要单独写键盘监听逻辑：

<!-- 可直接绑定字符串变量，有校验需求时也可以绑定自定义模型类 -->
<EditForm Model="@searchString" OnSubmit="Search">
    <InputText @bind-Value="searchString" class="form-text" />
    <button type="submit" class="btn btn-primary">Search</button>
</EditForm>

对应的Search方法可以直接写业务逻辑即可，不需要额外处理表单提交的默认行为。

• 方案3：完全不使用form标签
  如果你的场景不需要表单的其他能力，直接去掉外层的<form>标签即可，浏览器不会触发默认的表单提交行为，你原来的键盘监听和点击逻辑都可以正常运行。

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