Blazor preventDefault 提交表单

Question

在我的 EditForm 中，我想阻止用户通过按 Enter 键来提交表单。

我尝试了以下方法，但没有用。

<button type="submit" @onkeypress:preventDefault>Save</button>

非常感谢！

Answer 1

试试这个：

  <button type="submit" @onkeypress="@KeyHandler" 
                                  @onkeypress:preventDefault>Submit</button>

还有这个：

    void KeyHandler(KeyboardEventArgs args)
    {
        if (args.Key == "Enter")
        {
            return;
        }


    }

Answer 2

这是一个有效的代码示例，运行您自己看看当您按下 Enter 键时表单没有被提交：

在第一个字段中输入一个值，然后在第二个字段中输入一个值，然后跳出，然后按 Enter。现在看看输出 window 中打印的内容...您看到 "Submit..." 字符串了吗？我想不是。

<h1>My articles</h1>

<p>Leave me a comment</p>
<p>Note that the Save button is located outside of the EditForm component.</p>
<EditForm  Model="Model" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group">
        <label for="name">Name: </label>
        <InputText Id="name" Class="form-control" @bind-Value="@Model.Name"> 
                                                             </InputText>
        <ValidationMessage For="@(() => Model.Name)" />

    </div>
    <div class="form-group">
        <label for="body">Text: </label>
        <InputTextArea Id="body" Class="form-control" @bind- 
                                         Value="@Model.Text"></InputTextArea>
        <ValidationMessage For="@(() => Model.Text)" />
    </div>
    <p>
        <button type="submit" @onkeypress="@KeyHandler" 
                              @onkeypress:preventDefault>Submit</button>
    </p>
</EditForm>


@code
{

    private Comment Model = new Comment();

    private void HandleValidSubmit()
    {
        Console.WriteLine("Submit...");
    }

    void KeyHandler(KeyboardEventArgs args)
    {
        if (args.Key == "Enter")
        {
           return;
        }
        Console.WriteLine("KeyHandler...");

    }

}

Answer 3

这里是对JavaScript的回答，也请不要这样做：The Enter Key should Submit Forms, Stop Suppressing it

如果您仍想这样做：确保您的表单有多个输入并且没有提交按钮。

 <button type="button" @onclick="MySubmit">Save</button>

然后使用 EditContext 或其他方式在 MySubmit 中处理您的验证。

Answer 4

我通过在 EditForm 中放置 2 个提交按钮并禁用第一个按钮来实现此功能。

<button type="submit" disabled style="display: none" aria-hidden="true"></button>
<button type="submit">Save</button>

Blazor preventDefault 提交表单

Blazor preventDefault on submit form

blazor

blazor-client-side