如何在Blazor中触发CTRL + S快捷键保存表单输入数据？

要实现Ctrl+S自定义保存且不触发浏览器默认页面保存，核心是拦截快捷键并阻止默认事件，同时触发表单的完整验证与提交流程（和点击保存按钮行为一致）。以下是具体方案：

1. 绑定键盘事件与表单引用 #

修改<EditForm>标签，添加键盘按下事件监听，并通过@ref获取表单实例：

<EditForm Model=@user OnValidSubmit="@HandleValidSubmit" @onkeydown="HandleKeyDown" @ref="editForm">
    <!-- 原有表单内容保持不变 -->
</EditForm>

2. 实现键盘事件处理逻辑 #

在@code块中新增事件方法，判断Ctrl+S（含Mac的Cmd+S）组合键，阻止默认行为后调用表单的提交方法：

private EditForm? editForm;

private async void HandleKeyDown(KeyboardEventArgs e)
{
    // 兼容Windows/Linux（Ctrl+S）和Mac（Cmd+S）
    if ((e.CtrlKey || e.MetaKey) && e.Key.Equals("s", StringComparison.OrdinalIgnoreCase))
    {
        // 必须先阻止浏览器默认的页面保存行为
        e.PreventDefault();
        
        // 调用表单的提交方法，自动触发验证，验证通过后执行HandleValidSubmit
        if (editForm != null)
        {
            await editForm.SubmitAsync();
        }
    }
}

完整修改后的代码 #

<EditForm Model=@user OnValidSubmit="@HandleValidSubmit" @onkeydown="HandleKeyDown" @ref="editForm">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <p>
        <label for="displayName" class="form-label">
            Display Name:
        </label>
        <InputText class="form-control" id="displayName" @bind-Value="user.DisplayName" />
    </p>
    <p>
        <label for="firstName" class="form-label">
            First Name:
        </label>
        <InputText class="form-control" id="firstName" @bind-Value="user.FirstName" />
    </p>
    <p>
        <label for="lastName" class="form-label">
            Last Name:
        </label>
        <InputText class="form-control" id="lastName" @bind-Value="user.LastName" />
    </p>

    <button class="btn btn-outline-primary" type="submit">Save</button>
    <button class="btn btn-outline-primary" type="button" @onclick="_navigateToUsersList">Cancel</button>
</EditForm>

@code {
    private User user = new();
    private EditForm? editForm;

    private void _navigateToUsersList() => Navigation.NavigateTo("users");

    private async void HandleValidSubmit()
    {
        // 你的保存逻辑代码
    }

    private async void HandleKeyDown(KeyboardEventArgs e)
    {
        if ((e.CtrlKey || e.MetaKey) && e.Key.Equals("s", StringComparison.OrdinalIgnoreCase))
        {
            e.PreventDefault();
            if (editForm != null)
            {
                await editForm.SubmitAsync();
            }
        }
    }
}

关键细节 #

• e.PreventDefault()是核心：必须在执行自定义逻辑前调用，才能彻底阻止浏览器的默认页面保存操作。
• 使用editForm.SubmitAsync()而非直接调用HandleValidSubmit()：确保触发完整的表单验证流程，只有验证通过才会执行保存逻辑，和点击保存按钮的行为完全一致。
• 兼容Mac系统：通过e.MetaKey判断Mac的Cmd键，让快捷键在不同系统都能正常工作。

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