Blazor，我如何触发回车键事件来操作按钮功能

Question

我正在尝试Microsoft的todo列表示例：https://learn.microsoft.com/en-us/aspnet/core/tutorials/build-a-blazor-app?view=aspnetcore-3.1

我想添加一个待办事项，而不是用鼠标点击按钮，我想按回车键。我不喜欢在这个解决方案中使用JS：如何将焦点设置为InputText元素？我试图通过以下代码行触发方法private void Enter(KeyboardEventArgs e(：

<button @onclick="AddTodo" @onkeypress="@(e=>Enter(e)" tabindex="0"  >Add todo</button>

它不起作用。

enter code here
<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo" @onkeypress="Enter" tabindex="0"  >Add todo</button>
@code {
private IList<TodoItem> todos = new List<TodoItem>();
private string newTodo;

private void AddTodo()
{
if (!string.IsNullOrWhiteSpace(newTodo))
{
todos.Add(new TodoItem { Title = newTodo });
newTodo = string.Empty;
}
}

//private void Enter(KeyboardEventArgs e)
private void Enter()
{
//if (e.Key == "Enter")
{
if (!string.IsNullOrWhiteSpace(newTodo))
{
todos.Add(new TodoItem { Title = newTodo });
newTodo = string.Empty;
}
}
}
}

Answer 1

onkeypress仅针对字符键激发。按下所有按键时，onkeydown将启动。我在这里找到了所有关键事件之间差异的一些解释

用onkeydown试试，它起作用了：

<input type="text" @onkeydown="@Enter" />

在事件处理程序中，您必须这样做(请注意，我检查了Enter和NumpadEnter密钥(：

public void Enter(KeyboardEventArgs e)
{
if (e.Code == "Enter" || e.Code == "NumpadEnter")
{
// ...
}
}

Answer 2

如果你使用HTML表单，它很简单-不需要寻找按键，只需要让浏览器来完成工作：

<form @onsubmit=Enter>
<label for="todo">What to do?</label>
<input id="todo" placeholder="Something todo" @bind="newTodo" />
<button>Add todo</button>
</form>
<ul>
@foreach(var item in todos)
{
<li @key=item>@item.Title</li>
}
</ul>

@code {
private class TodoItem { public string Title { get; set; } }
private IList<TodoItem> todos = new List<TodoItem>();
private string newTodo;
private void Enter()
{
if (!string.IsNullOrWhiteSpace(newTodo))
{
todos.Add(new TodoItem { Title = newTodo });
newTodo = string.Empty;
}
}
}

你可以在这里试试：https://blazorrepl.com/repl/wPabvwlv138n6KMN23

Answer 3

我们可以通过组合两个事件来实现这一点

<input placeholder="Task Heading" @bind="title" id="todo"  @bind:event="oninput" @onkeydown="@Enter1" />

public async Task Enter1(KeyboardEventArgs e)
{
if (e.Code == "Enter" || e.Code == "NumpadEnter")
{
await js.InvokeVoidAsync("foucusById", "desc");
}
}

Answer 4

如Umair所述，您可以使用：

<input type="text" @onkeydown="@Enter" />

带处理器

public void Enter(KeyboardEventArgs e)
{
if (e.Code == "Enter" || e.Code == "NumpadEnter")
{
// ...
}
}

但该解决方案不包括"；输入按"；在移动设备键盘上(在我的Android上测试(。如果使用e。键而不是e。代码，然后它还包括NumPad输入和移动设备以及

public void Enter(KeyboardEventArgs e)
{
if (e.Key == "Enter")// Covers: Enter + NumPad Enter + Mobile keyboard Go to(enter)
{
// ...
}
}

这里有一个不错的网站，您可以在这里进行测试：https://w3c.github.io/uievents/tools/key-event-viewer.html只需比较UI事件密钥和代码行为

Answer 5

这些答案非常有效，除非它们嵌套在<EditForm>中。使用@onkeydown="@Enter"的解决方案也将触发<EditForm>OnValidSubmit。

在这种情况下，我找到的最佳解决方案是在<input>周围嵌套另一个<EditForm>，并使用它的OnValidSubmit来检测回车键。

<EditForm EditContext="_editContext" OnValidSubmit="HandleValidFormSubmit">
-- SOME OTHER FORM CONTROLS HERE ---
<EditForm EditContext="_editContext" Context="entercontext" OnValidSubmit="Enter">
<input type="text" />
</EditForm>
</EditForm>
private void Enter()
{
}

Answer 6

如果添加type="提交"；属性。

<button type="submit" @onclick="AddTodo" @onkeypress="Enter" tabindex="0"  >Add todo</button>