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

【问题标题】：Blazor, how can I trigger the enter key event to action a button function?Blazor，如何触发输入键事件来操作按钮功能？
【发布时间】：2020-12-30 19:17:35
【问题描述】：

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

我想添加一个待办事项，而不是用鼠标点击按钮，我想按回车键。我不喜欢在这个解决方案中使用 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;
            }
        }
    }
}

【问题讨论】：

标签： blazor keyboard-events blazor-webassembly

【解决方案1】：

onkeypress 仅对字符键触发。 onkeydown 将触发所有按下的键。我发现了所有关键事件之间差异的一些解释here

用onkeydown 试试，它成功了：

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

在事件处理程序中，您必须这样做（注意我检查了 Enter 和 NumpadEnter 键）：

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

【讨论】：

很抱歉没有解决。 onkeydown 仍然不会触发 Enter 方法
我刚用回车键试了一下，对我有用，在调试模式下看这个截图：i.imgur.com/870rtg8.png 此外，你必须同时为两个回车键添加Enter 和NumpadEnter。
我认为他希望 Enter 在 TextBox 中触发，而不是在 Button 上。
啊，是的，没有意识到我使用的是从问题中复制的按钮，但是事件处理程序对两者都有效，我会更新答案。
我使用@onkeyup="@Enter" 代替按回车键一次。我也试图做这样的事情：@onkeyup="@ (e=>e.Code=="Enter"?Enter(e))" 但它没有用。做得好。恭喜你，知识渊博...

【解决方案2】：

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

<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");
    }

}

【讨论】：

那个绑定事件应该是这样的：@bind-value:event="oninput"

【解决方案3】：

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

【讨论】：

最佳答案！

【解决方案4】：

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

&lt;button type="submit" @onclick="AddTodo" @onkeypress="Enter" tabindex="0"  &gt;Add todo&lt;/button&gt;

【讨论】：

这只有在文本框和按钮都在同一个<form>元素内时才有效。正如 Magoo 先生的回答所见。