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.--例如，创建一个js代码以将焦点放在div上，例如：

_Host.cshtml

此函数将元素引用作为参数。

2.-渲染组件后调用此函数。

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

3.-实现自己的protected ElementReference myDiv; // set by the @ref attribute protected async override Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JSRuntime.InvokeVoidAsync("SetFocusToElement", myDiv); } }：

KeyDown

请注意，这不是Blazor问题，只是默认的html和js行为。我是在写游戏的过程中学习的，并在Blagario实验室进行了测试。

运行：

Flappy Blazor Bird

Flappy Blazor Bird上的演示

编辑于2019年11月：

代码改进了@Quango（非常感谢）

Answer 2

如果还有人想要解决方案。我认为现在在 .NET 5 中你可以在没有 js 的 Blazor 中实现这一点。设置焦点和 tabindex 很重要，当您失去焦点或将焦点设置到另一个元素时，这将不起作用。这对我有用：

    <table @ref="testRef" tabindex="0" @onkeydown="HandleKeyDown">
    <thead>
        <tr>
            <th>
                Pressed Key
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                @pressedKey
            </td>
        </tr>
    </tbody>
    </table>

    private ElementReference testRef;
    private string pressedKey;
    
    private void HandleKeyDown(KeyboardEventArgs e)
    {
        pressedKey = e.Key;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await testRef.FocusAsync();
        }
    }

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

2 个答案: