使用Blazor <InputText>时如何禁用回车键触发EditForm提交按钮功能

你之前的拦截方案不生效，是因为回车键触发表单提交的事件源头是<InputText>输入框，而非提交按钮。按键事件会从输入框向上冒泡到<EditForm>层级，触发表单默认的校验和提交流程，仅给提交按钮加按键拦截无法覆盖这个触发路径。

方案1：针对弹窗内搜索输入框单独拦截（最适配你的场景） #

直接给弹窗中的搜索<InputText>绑定按键事件，拦截回车键的冒泡行为：
前端组件代码：

<InputText 
    @bind-Value="SearchKeyword"
    @onkeydown="HandleSearchKeyDown"
    @onkeydown:preventDefault="IsEnterPressed"
/>

后台逻辑代码：

private string SearchKeyword { get; set; }
private bool IsEnterPressed { get; set; }

private void HandleSearchKeyDown(KeyboardEventArgs e)
{
    // 仅拦截回车键
    if (e.Key.Equals("Enter", StringComparison.OrdinalIgnoreCase))
    {
        IsEnterPressed = true;
        // 执行你的搜索逻辑
        ExecuteSearch();
        return;
    }
    IsEnterPressed = false;
}

这个方案不会影响表单其他区域的正常回车提交逻辑，仅针对弹窗内的搜索场景生效。

方案2：全局禁用EditForm的默认回车提交 #

如果你的整个表单都不需要回车键触发提交，直接禁用<EditForm>的默认提交行为，改为手动触发提交：

<EditForm 
    Model="YourFormModel" 
    @onsubmit:preventDefault="true"
>
    <!-- 表单其他内容 -->
    <button type="button" @onclick="HandleManualSubmit">提交表单</button>
</EditForm>

private void HandleManualSubmit()
{
    // 手动执行校验、提交逻辑
    if (EditContext.Validate())
    {
        // 提交操作
    }
}

方案3：弹窗内嵌套独立空表单拦截提交 #

如果弹窗内有多个需要回车触发自定义逻辑的输入框，可以给弹窗整体套一层独立的表单，拦截内层表单的提交行为，避免事件冒泡到外层<EditForm>：

<!-- 弹窗内容 -->
<form @onsubmit:preventDefault="true">
    <InputText @bind-Value="SearchKeyword" />
    <button type="button" @onclick="ExecuteSearch">搜索</button>
</form>

注意事项 #

• 优先使用@onkeydown而非@onkeypress做拦截，部分浏览器对功能键的keypress事件触发规则不一致，keydown兼容性更好
• 拦截逻辑仅针对回车键生效，不要阻断其他正常输入的按键行为
• 如果弹窗DOM结构渲染在<EditForm>内部，事件冒泡不可避免，优先使用前两种拦截方案

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