在整个 Blazor 页面中收听键盘输入

Question

我正在尝试实现一个始终监听键盘输入的 Blazor 应用（比如说某种全屏游戏）。

我可以将按键按下事件侦听器视为一种可能的实现方式，因为实际上并没有自动聚焦的输入字段。

是否有更好的解决方案来仅对屏幕任何部分的按键做出反应？

如果选择了那个，我如何从客户端 Blazor 应用添加事件侦听器？我尝试使用这样的脚本失败：

编辑：我稍微修改了下面的代码，以便在修复我询问的原始关键错误后使其真正起作用。

scripts/event-listener.js

window.JsFunctions = {
    addKeyboardListenerEvent: function (foo) {
        let serializeEvent = function (e) {
            if (e) {
                return {
                    key: e.key,
                    code: e.keyCode.toString(),
                    location: e.location,
                    repeat: e.repeat,
                    ctrlKey: e.ctrlKey,
                    shiftKey: e.shiftKey,
                    altKey: e.altKey,
                    metaKey: e.metaKey,
                    type: e.type
                };
            }
        };

        // window.document.addEventListener('onkeydown', function (e) { // Original error
        window.document.addEventListener('keydown', function (e) {
            DotNet.invokeMethodAsync('Numble', 'JsKeyDown', serializeEvent(e))
        });
    }
};

index.html

<head>
    <!--  -->
    <script src="scripts/event-listener.js"></script>
</head>

调用方式：

protected async override Task OnAfterRenderAsync(bool firstRender)
{
    await jsRuntime.InvokeVoidAsync("JsFunctions.addKeyboardListenerEvent");
}

并使用以下方法尝试接收事件：

using Microsoft.AspNetCore.Components.Web;
using Microsoft.JSInterop;

namespace Numble;

public static class InteropKeyPress
{
    [JSInvokable]
    public static Task JsKeyDown(KeyboardEventArgs e)
    {
        Console.WriteLine("***********************************************");
        Console.WriteLine(e.Key);
        Console.WriteLine("***********************************************");

        return Task.CompletedTask;
    }
}

我设法执行了脚本，但我没有收到任何事件。

Answer 1

活动名称是keydown，不是onkeydown。

在整个 Blazor 页面中收听键盘输入

Listen to keyboard input in the whole Blazor page

event-handling

dom-events

blazor

blazor-webassembly