Question

我正在尝试使用Microsoft的待办事项清单示例：https://docs.microsoft.com/en-us/aspnet/core/tutorials/build-a-blazor-app?view=aspnetcore-3.1

我想添加一个待办事项，而不是用鼠标单击按钮，而我想按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

如果您使用 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 2

onkeypress仅针对字符键被触发。 onkeydown将为所有按下的键触发。我发现了所有关键事件here

之间的区别的解释

尝试使用onkeydown并成功：

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

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

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

Answer 3

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

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

}

Answer 4

如果您向按钮添加 type="submit" 属性，浏览器就会执行此操作。

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

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

4 个答案: