事件侦听器，用于捕获键盘输入的内容？

Question

我使用的是香草JavaScript/HTML/CSS。没有这样的框架或任何花哨的东西。

我正在制作一款打字速度游戏。用户会看到一个他们需要键入的段落。这就是我的HTML如果呈现给您"；你好，世界&"；。

<div id="typing_window" tabindex="1">
<span id="element0">H</span>
<span id="element1">e</span>
<span id="element2">l</span>
<span id="element3">l</span>
<span id="element4">o</span>
<span id="element5">&nbsp;</span>
<span id="element6">W</span>
<span id="element7">o</span>
<span id="element8">r</span>
<span id="element9">l</span>
<span id="element10">d</span>
<span id="element11">!</span>
</div>

我想添加一个事件监听器来捕捉键盘输入的内容。例如，第一个字符是大写H，因此如果用户在键盘上按下shift+H或capslock+H，则事件侦听器句柄函数应返回一个"H"；H〃；，我可以将其与段落中的下一个字符进行比较。同样的功能还需要正确地捕捉空格和任何特殊字符，如！。

有简单的方法吗？

Answer 1

您可以使用一个常规的keyup事件，然后访问；键"；属性，或者用"s n前面要换班。

快速示例var map＝｛"s45"："H"/不知道是否为实际键，只是示例/｝addEventListener("keyup"，e=>var键＝"；如果(e.shiftKey(key+＝"；s"；key+=e.keyCodevar mapt=映射[键]//做点什么

})