如何阻止Blazor表单按回车键自动提交（ASP.NET）

针对你遇到的Blazor表单误按回车提交的问题，这里有几个简单可行的解决办法：

方法一：全局拦截表单内的回车提交（推荐） #

给表单容器添加键盘事件，仅在按下回车键且焦点不在提交按钮上时阻止默认行为，无需逐个修改输入框：

<form @onkeydown="HandleFormKeyDown">
    <!-- 你的10个输入字段，包括必填项 -->
    <RadzenTextBox @bind-Value=@WIR40Entity.VictimPhoneNumber Placeholder=@ADphone MaxLength="15" class="w-100" />
    <!-- 其他输入组件... -->
    <button type="submit" class="submit-btn">提交记录</button>
</form>

@code {
    private void HandleFormKeyDown(KeyboardEventArgs e)
    {
        // 仅拦截回车键，且当前焦点不在提交按钮时阻止默认提交行为
        if (e.Key == "Enter" && !e.Target.ClassList.Contains("submit-btn"))
        {
            e.PreventDefault();
        }
    }
}

方法二：将提交按钮改为非提交类型 #

把提交按钮的type设为button，手动绑定点击事件执行提交逻辑，彻底避免回车触发提交：

<form>
    <!-- 输入字段... -->
    <button type="button" @onclick="SubmitRecord" class="submit-btn">提交记录</button>
</form>

@code {
    // 假设你使用EditContext进行表单验证
    [CascadingParameter] private EditContext EditContext { get; set; }

    private async Task SubmitRecord()
    {
        // 先执行表单验证
        if (!EditContext.Validate())
        {
            return;
        }
        // 执行记录保存逻辑
        await SaveNewRecordAsync();
    }

    private Task SaveNewRecordAsync()
    {
        // 你的保存实现
        return Task.CompletedTask;
    }
}

方法三：单个输入框拦截回车（适合局部需求） #

如果你只需要针对特定输入框阻止回车，不要直接设置@onkeydown:preventDefault="true"（这会阻止所有按键输入），而是仅在按下回车键时阻止默认行为：

<RadzenTextBox @bind-Value=@WIR40Entity.VictimPhoneNumber 
               @onkeydown="(e) => { if (e.Key == \"Enter\") e.PreventDefault(); }" 
               Placeholder=@ADphone MaxLength="15" class="w-100" />

说明 #

你之前的错误是直接阻止了所有按键的默认行为，导致无法输入；正确的做法是仅拦截回车键触发表单提交的动作，而非所有按键操作。

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