如何在使用Blazor<InputText>时禁用ENTER键提交按钮

Question

我似乎找不到一种方法来禁用<button type="submit">中包裹在<EditForm>中的回车键。

问题是，在任何blazor<InputText>控制下，当用户按ENTER键时，blazor激活验证和提交过程。

我也尝试使用<button type="submit" @onkeypress="@KeyHandler" @onkeypress:preventdefault>，但它不工作，表单仍然继续验证和提交。

更具体地说，在我的<EditForm>中，我调用了一个模态对话框，其中包含一个<InputText>用于搜索项目，每次按ENTER键执行搜索时，表单在后台得到验证和提交:(

请帮忙🙏🙏🙏

Answer 1

尝试如下:

<InputText @bind-Value="_model.Value" onkeypress="return event.keyCode!=13"/>
<input @bind-value="_model.Value" onkeypress="return event.keyCode!=13" />

归功于@ dustsilicon .

这是我的测试页:

@page "/Editor"
<h3>EditForm</h3>
<EditForm EditContext="this._editContext" OnSubmit="SubmitForm">
<div class="p-2">
No Enter: <InputText @bind-Value="_model.SelectValue" onkeypress="return event.keyCode!=13"></InputText>
</div>
<div class="p-2">
No Enter: <input type="number" @bind-value="_model.Value" onkeypress="return event.keyCode!=13" />
</div>
<div class="p-2">
Enter: <input @bind-value="_model.SelectValue" />
</div>
<div class="p-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</EditForm>
<div class="m-2 p-2">Value: @_model.Value</div>
<div class="m-2 p-2">@message</div>
@code {
public class Model
{
public int Value { get; set; }
public string SelectValue { get; set; }
}
private string message;
Model _model = new Model();
EditContext _editContext;
protected override void OnInitialized()
{
_editContext = new EditContext(_model);
}
void SubmitForm()
{
message = $"Form Submitted at :{DateTime.Now.ToLongTimeString()}";
}
}