事件侦听器来捕获键盘输入会输入的内容？答案

【问题标题】：Event listener to capture what would've been input by keyboard entry?事件侦听器来捕获键盘输入会输入的内容？
【发布时间】：2020-08-11 10:04:54
【问题描述】：

我正在使用原生 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”，我可以将其与段落中的下一个字符进行比较.同样的函数还需要正确捕获空格和任何特殊字符，如!。

有没有简单的方法可以做到这一点？

【问题讨论】：

标签： javascript event-handling dom-events

【解决方案1】：

您可以只使用常规的 keyup 事件，然后访问“key”属性，或者制作您自己的与键码对应的结果映射，在前面加上“”s n 表示移位。

快速示例 var map={"s45": "H"/不知道是不是实际的键，只是示例/} addEventListener("keyup", e=> { 变量键=""; if(e.shiftKey) 键+="s" 键 += e.keyCode var mapt=map[键] // 做点什么

})

【讨论】：