事件侦听器捕获通过键盘输入会输入什么？

问题描述

我正在使用普通的JavaScript / HTML / CSS。没有框架或类似的东西。

我正在制作打字速度游戏。向用户显示他们需要键入的段落。如果向您显示“ Hello World！”，这就是我的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”，我可以将其与段落中的下一个字符进行比较。同样的功能还需要正确捕获空格和任何特殊字符，例如！。

有一种简单的方法吗？

解决方法

好吧，您可以只使用常规的keyup事件，或者访问“ key”属性，或者使用“ n”前移的键来制作与键代码相对应的结果图。

快速示例 var map = {“ s45”：“ H” / 不知道实际的密钥，只是示例 /} addEventListener（“ keyup”，e => { var key =“”; if（e.shiftKey）key + =“ s” 键+ = e.keyCode var mapt = map [key] //做点事

}）

dom-events event-handling javascript