在blazor应用程序中，在MudField (MudBlazor)上按回车键防止出现新行

Question

我有blazor webassembly应用程序使用MudBlazor对于UI，在razor页面我有MudField在一个MudForm中，当用户按回车键时，光标转到换行符，我想防止在回车键上转换行符，只有当用户按Shift+Enter时，它才应该转到新行。下面是我的标记:

<MudForm Class="d-flex flex-grow-1 px-4" SubmitOnEnter="true">
<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" />

@code {
protected async Task HandleKeyDown(KeyboardEventArgs e)
{
if (e.Key == "Enter")
{

e.preventDefault() //This only works in JS

//Send the message to the API 
}
}

}

我知道在javascript中使用e.p preventdefault ()的方式。但我不知道如何在blazor中实现同样的行为。我将感激任何帮助。谢谢你

Answer 1

这里展示了一种方法:如何使用event。Blazor中的PreventDefault

然而，上述方法似乎还没有得到MudBlazor的支持。但是有一种方法如果你把<MudTextField>包在<div @onkeydown:preventDefault...>里就像下面的&看到它在TryMudBlazor上工作…

<MudForm Class="d-flex flex-grow-1 px-4" SubmitOnEnter="true">
<div @onkeydown:preventDefault="_preventDefault">
<MudTextField
T="string"
Immediate="true"
DisableUnderLine="true"
Lines="2"
Margin=Margin.Dense
Clearable="true"
Variant="Variant.Outlined"
OnKeyDown="HandleKeyDown"/>
</div>
</MudForm>
@code {
bool _preventDefault;
protected void HandleKeyDown(KeyboardEventArgs e)
{
_preventDefault = e.Key == "Enter" && !e.ShiftKey;
}
}