防止 Blazor WebAssembly 在按回车键时提交表单

Question

我只是花了很长时间试图让 Blazor 不要提交和重新加载页面，而是触发我的方法而不是输入键。有

<form>
  <input type="text" class="form-text" @bind-value:event="oninput" @onkeydown="Enter" @bind-value="@searchString" />
  <button type="button" class="btn btn-primary" @onclick="Search">Search</button>
</form>

每当我点击回车键时，如果我使用回车键而不是点击，页面就会重新加载，从而阻止结果显示。所以我添加了

<button type="submit" disabled hidden></button>

修复了它。

现在这对我来说似乎是一种解决方法。有没有更优雅的方法来做到这一点？如果我有原始按钮作为提交，它也不会工作。我认为这是可行的，因为有一个用于输入回车键的提交按钮，但是被禁用它什么也做不了。

Answer 1

在大多数情况下，在 Blazor 下使用 form 标签是错误的，无论如何你可以在这里找到一个使用条件 keydown 的好例子： https://www.syncfusion.com/faq/blazor/forms-and-validation/how-do-i-conditionally-preventdefault-inside-the-input-component-in-blazor

防止 Blazor WebAssembly 在按回车键时提交表单

Prevent Blazor WebAssembly submiting form on pressing enter

html

blazor

blazor-webassembly