Blazor WebAssembly中如何阻止MudTextField按Enter换行、仅Shift+Enter换行？

解决方案 #

方法一：利用Blazor事件修饰符实现条件阻止 #

Blazor支持事件修饰符，可通过条件判断仅在Enter未配合Shift时阻止默认换行行为：

修改MudTextField的事件绑定：

<MudForm Class="d-flex flex-grow-1 px-4" SubmitOnEnter="false">
    <MudTextField T="string" Placeholder="@Localizer["Enter your message..."]" @bind-Value="@MyChatState.CurrentMessage" Immediate="true"
                  DisableUnderLine="true" Lines="2" Margin=Margin.Dense Clearable="true"
                  Variant="Variant.Outlined" Validation="@(_validator.ValidateFieldsAsync)" 
                  @onkeydown="HandleKeyDown" 
                  @onkeydown:preventDefault="@(e => e.Key == "Enter" && !e.ShiftKey)" />
</MudForm>

调整HandleKeyDown逻辑，仅在目标场景触发API调用：

@code {
    protected async Task HandleKeyDown(KeyboardEventArgs e)
    {
        // 兼容不同环境的Enter键值
        if ((e.Key == "Enter" || e.Key == "Return") && !e.ShiftKey)
        {
            // 调用API发送消息
            await SendMessage();
            // 发送后清空输入框
            MyChatState.CurrentMessage = string.Empty;
        }
        // Shift+Enter时保留默认换行行为，无需额外处理
    }

    private async Task SendMessage()
    {
        // 此处编写你的API调用逻辑
    }
}

方法二：通过JS互操作阻止默认行为 #

若方法一因组件版本兼容性问题失效，可使用JS互操作手动拦截：

1. 在wwwroot/index.html中添加全局JS函数：

<script>
    window.preventDefault = function(event) {
        event.preventDefault();
    }
</script>

2. 在Razor组件中注入IJSRuntime：

@inject IJSRuntime JSRuntime

3. 修改按键处理方法：

@code {
    protected async Task HandleKeyDown(KeyboardEventArgs e)
    {
        if ((e.Key == "Enter" || e.Key == "Return"))
        {
            if (!e.ShiftKey)
            {
                // 调用JS阻止默认换行
                await JSRuntime.InvokeVoidAsync("preventDefault", e);
                // 发送消息到API
                await SendMessage();
                MyChatState.CurrentMessage = string.Empty;
            }
        }
    }

    private async Task SendMessage()
    {
        // 此处编写你的API调用逻辑
    }
}

额外提示 #

• 建议将MudForm的SubmitOnEnter设为false，避免表单提交与自定义按键逻辑冲突。
• 测试时需覆盖不同浏览器环境，确保按键值判断的兼容性。

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