如何仅使用 JS 键事件检测实际字符（用于文本编辑器）

Question

我正在为方程（结合纯文本）开发一个类似 WYSIWYG 的编辑器。由于使用现有框架（contentEditable 或 document.designMode）无法实现我想要的功能（用于方程式），因此我现在正在从头开始构建一个编辑器。（到目前为止效果很好，我已经成功实现了普通编辑器的大部分功能）

我一直在使用 keydown 事件来检测处于“编辑模式”时的用户输入（即，当用户单击编辑器区域时，也显示光标），但问题在于，单击时“alt”或“strg”或其他不是实际字符的键，它们也会显示在我的编辑器中。

现在，我尝试使用 if 语句忽略这些键，但是我看到了两个问题： 1. 它可能会影响性能，当必须忽略太多键时 2. 我永远无法确定，如果不存在一些异国情调的密钥，也许在 Mac 左右，我没有忽略

我也尝试使用 keypress 事件代替，它工作得很好，但仍然显示“Enter”和“Delete”，所以谁知道它也可能显示哪些其他键。此外，它被标记为“已弃用”。

有没有更好的方法来做到这一点，或者我只需要列出一大串要忽略的键？

Answer 1

你也可以检查这个document.addEventListener("keydown", (event) => {      console.log(event);      if (event.code === "Escape") {        console.log("abc");      }    });

Answer 2

一个简单（但有限）的方法是检查 keydown 事件keyCode是否在 65（键 'a' 的代码）和 90（'z' 的代码）之间。如果您需要的不仅仅是字母，另一种解决方案是检查事件key及其长度。对于实际字符， thekey只保存该字符（因此长度为 1）。对于 Ctrl、Shift 等，key将保存键的全名，例如“Control”、“Shift”等。因此，如果键是实际字符，则该key属性的长度为 1。document.onkeydown = function(e) {&nbsp; var keycode = e.keyCode;&nbsp; if(e.key.length == 1) {&nbsp; &nbsp; document.querySelector("#editor").innerHTML += e.key;&nbsp; }}<p id="editor"></p>