提交表单上的 Blazor preventDefault答案

【问题标题】：Blazor preventDefault on submit form提交表单上的 Blazor preventDefault
【发布时间】：2020-04-12 05:28:21
【问题描述】：

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

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

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

非常感谢！

【问题讨论】：

您的意思是当光标在文本字段中然后按“输入”时您不想提交？如果提交按钮有焦点，然后按“回车”，那么你要提交吗？

标签： blazor blazor-client-side

【解决方案1】：

我只需将 2 个提交按钮放在 EditForm 中即可完成这项工作，第一个按钮被禁用。

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

【讨论】：

有趣的发现。这是因为“浏览器应该在表单中找到第一个提交按钮并单击它”。它在欺骗浏览器，但它应该在任何地方都能正常运行。
只有当第二个按钮的类型是 button 而不是 submit 时，这对我才有效。

【解决方案2】：

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

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

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

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

【讨论】：

这不是问题的答案。问题是如何防止提交按钮的默认行为。这是在 Blazor 中启用的，甚至 OP 都错误地尝试使用它。您的建议需要 OP 完全更改表单的布局，并手动控制验证：大量的工作和知识......有一个简单的解决方案。请参阅下面的答案。

【解决方案3】：

这是一个工作代码示例，运行它并亲自查看当您按下 Enter 键时表单没有提交：

在第一个字段中输入一个值，然后在第二个字段中输入一个值，然后按 Tab 键，然后按 Enter。现在看看输出窗口中打印的内容......你看到“提交......”字符串吗？我想不是。

<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...");

    }

}

【讨论】：

我收到“提交...”但没有收到“KeyHandler...”ibb.co/pK8H6Kf
代码很健壮，应该可以工作。我在几台计算机上运行它，服务器端和客户端，它运行得非常好。我将在 github 中报告这个奇妙的问题，并在此处留下您问题的链接。这可能与量子现象有关，与软件无关。
刚刚尝试了一个新项目（最新预览版），但同样的问题
能否请将您的完整应用上传到 github，以便我可以按原样下载并运行它...

【解决方案4】：

试试这个：

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

还有这个：

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


    }

【讨论】：

表单还在提交中