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



我正在尝试实现一个Blazor应用程序,它可以一直监听键盘输入(比如说,某种全屏游戏(。

我可以将key-down事件监听器视为它的一种可能实现,因为实际上并没有一个可以自动关注的输入字段

有没有更好的解决方案可以对屏幕任何部分的按键做出反应?

如果是选中的,我如何从客户端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;
}
}

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

事件的名称是keydown,而不是onkeydown

相关内容

  • 没有找到相关文章