input - 如何在不使用 Blazor 中的输入标签的情况下检测按键

Question

我希望能够在不使用 Blazor 中的 HTML INPUT 标记的情况下捕获键盘输入。按下该键后，我将显示一个图形来表示按下的字母。

像这样的东西

@page "/counter"
@using Microsoft.AspNetCore.Components.Web

<div @onkeypress="e => KeyPress(e)">
    Press any letter key
</div>

@code {

    private void KeyPress(KeyboardEventArgs e)
    {
        var letter = e.Key;
    }
}

当我在 KeyPress 方法上设置断点时，它似乎没有被调用。非常感谢任何帮助。

Answer 1

你快到了，但你忘了让 div 成为焦点。这是步骤:

0.- 使您的 div 可聚焦添加 tabindex标签:

<div 
    class="jumbotron"
    @onkeydown="@KeyDown"
    tabindex="0"
    @ref="myDiv" >
   <h1 class="display-4">
       @letter
   </h1>   
</div>

1.- 在 _Host.cshtml 上创建一个 js 代码以将焦点设置到您的 div例如:

    <script>
        window.SetFocusToElement = (element) => {
            element.focus();
        };
    </script>

此函数将 Element 引用作为参数。

2.- 在您的组件呈现后调用此函数。

protected ElementReference myDiv;  // set by the @ref attribute

protected async override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender) 
    {
        await JSRuntime.InvokeVoidAsync("SetFocusToElement", myDiv);
    }            
}  

3.- 实现你自己的 KeyDown :

protected void KeyDown(KeyboardEventArgs e)
{
    letter = $"Pressed: [{e.Key}]";
}

请注意，这不是 Blazor 问题，只是默认的 html 和 js 行为。我学会了写游戏，请查看 Blagario实验室。

正在运行:



演示在 Flappy Blazor Bird

2019 年 11 月编辑:

代码改进了 @Quango (非常感谢)