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

Question

我正在尝试来自 Microsoft 的待办事项列表示例。

我想添加一个待办事项，但我不想按鼠标单击按钮，而是想按 Enter 键。我对在这个解决方案中使用 JS 不满意：How to set the focus to an InputText element? 我尝试通过这行代码触发方法 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

将在按下所有按键时触发。我找到了所有关键事件之间差异的一些解释here

用

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")
    {
         // ...
    }
}

但此解决方案不涵盖移动设备键盘上的“Enter press”（在我的 Android 上测试）。如果您使用 e.Key 而不是 e.Code，那么它也涵盖 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

。

在这种情况下，我发现的最佳解决方案是嵌套另一个

<EditForm>

包裹在

<input>

周围，并使用它的

OnValidSubmit

来检测 Enter 键。

<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="submit" 属性添加到按钮，浏览器已经执行此操作。

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