时间戳

首页 > 解决方案 > Blazor，如何触发输入键事件来操作按钮功能？

blazor - Blazor，如何触发输入键事件来操作按钮功能？

问题描述

我正在尝试 Microsoft 的待办事项列表示例：https ://docs.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;
            }
        }
    }
}

标签： blazorkeyboard-eventsblazor-webassembly

解决方案

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

尝试一下onkeydown，它奏效了：

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

在事件处理程序中，您必须执行此操作（请注意，我同时检查Enter和NumpadEnter键）：

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

推荐阅读