如何解决Blazor,我如何触发Enter键事件来操作按钮功能?
我正在尝试使用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;
}
}
}
}
解决方法
如果您使用 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
, onkeypress
仅针对字符键被触发。 onkeydown
将为所有按下的键触发。我发现了所有关键事件here
尝试使用onkeydown
并成功:
<input type="text" @onkeydown="@Enter" />
在事件处理程序中,您将必须执行此操作(注意,我同时检查了Enter
和NumpadEnter
键):
public void Enter(KeyboardEventArgs e)
{
if (e.Code == "Enter" || e.Code == "NumpadEnter")
{
// ...
}
}
,
我们可以通过结合这两个事件来实现这一点
public async Task Enter1(KeyboardEventArgs e)
{
if (e.Code == "Enter" || e.Code == "NumpadEnter")
{
await js.InvokeVoidAsync("foucusById","desc");
}
}
,
如果您向按钮添加 type="submit" 属性,浏览器就会执行此操作。
<button type="submit" @onclick="AddTodo" @onkeypress="Enter" tabindex="0" >Add todo</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。