提交表单上的Blazor preventDefault

Question

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

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

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

非常感谢！

Answer 1

我只在EditForm中放置了两个提交按钮，第一个按钮被禁用，就可以实现这一点。

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

Answer 2

这是JavaScript的一个答案，也是一个不要这样做的恳求：Enter键应该提交表单，停止抑制它

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

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

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

Answer 3

这是一个工作代码示例，运行它，当您按下Enter键时，您可以自己查看表单是否未提交：

在第一个字段中输入一个值，然后在第二个字段中，然后制表，然后按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...");
}
}

Answer 4

试试这个：

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

这个：

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

}