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

Question

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

问题在于，在任何 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" />

归功于@dustysilicon。

这是我的测试页：

@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()}";
    }
}

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

How to Disable ENTER Key Press for submit button when using Blazor <InputText>

keypress

preventdefault

blazor

.net-5

blazor-editform