【问题标题】：How can I detect if backspace is pressed on the site?如何检测网站上是否按下了退格键？
【发布时间】：2021-11-20 14:26:56
【问题描述】：

我目前正在制作一个简单的在线文本编辑器网站。而且我无法检测到退格键被按下。这是代码： HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="cssfile/style.css">
    <title> Code Editor </title>
    <script src="jsfile/main.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="navdiv"></div>
    <div id="board" class="board">

    </div>
</body>

</html>

js: 这是我的主要代码：

document.addEventListener("keypress", function (event) {
    console.log(event.key)
    if (event.key == "Enter") {
        document.getElementById("board").innerText += '\n'
    } else {
        document.getElementById("board").innerText += event.key
    }
});

这是我的代码，我试过了

if(event.key == "Backspace")

但这没有用。

【问题讨论】：

当您按下退格键时，您的console.log 行记录了什么？
有用吗？ stackoverflow.com/questions/2353550/…
@Jamiec 不，我试过它没有用。这让我很困惑
@AntonyNg 嗨，我也尝试了这些方法，但没有一个有效。

标签： javascript html

【解决方案1】：

你很接近。

您正在使用keypress，而您应该使用keyup（或者keydown，如果您想在按键完成之前知道）。

KeyPress 事件仅针对字符（可打印）键调用，KeyUp 和 KeyDown 事件针对所有包括不可打印的键（如 Control、Shift、Alt、BackSpace 等）引发。

试试这个：

document.addEventListener("keyup", function(event) {
  console.log(event.key);
  if (event.key === "Backspace") {
    document.getElementById("board").innerText += '\n'
  } else {
    document.getElementById("board").innerText += event.key
  }
});

【讨论】：

是的，我现在明白了，感谢您的帮助
随时！如果此答案有帮助，请不要忘记接受！
接受了这个答案

【解决方案2】：

keypress 事件 has been deprecated 并且您的浏览器不支持它。请改用keydown。

document.addEventListener("keydown", function (event) {
    console.log(event.key)
    if (event.key == "Backspace") {
        document.getElementById("board").innerText += '\n'
    } else {
        document.getElementById("board").innerText += event.key
    }
});

【讨论】：

是的，我对答案投了赞成票

【解决方案3】：

keypress 事件已弃用，仅在按键产生字符值时触发。因此，在您的情况下，它不会被退格触发。

您应该使用keydown 事件。

【讨论】：

感谢您的支持。

【解决方案4】：

2021 年更新：使用 `keyup` 和 `event.key`

❌不好

keydown 让您知道何时按下该键，但会在任何操作发生之前触发。
event.keyCode 既难以解释（数字代表字母和所有），deprecated

✅很好

keyup 在退格事件发生后触发（即一个字符被删除），就像 keypress
event.key 既是 universally supported 又是 not deprecated

<form>
  <label>Foo:
    <input name="foobar" placeholder="ex: foobar" />
  </label>
</form>

document.querySelector('input[name="foobar"]').addEventListener('keyup', function (ev) {
  console.log(ev.key);
  if ("Backspace" == ev.key) {
    console.log("It's a backspace!!");
  }
})

【讨论】：

【解决方案5】：

您可以使用event.keyCode == 8。

document.addEventListener("keydown", function(event) {
  console.log(event.keyCode);
  if (event.keyCode == 8) {
    document.getElementById("board").innerText += '\n'
  } else {
    document.getElementById("board").innerText += event.key
  }
});

KeyCode 文档：

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#constants_for_keycode_value

【讨论】：

32 是空格键的键码。 8 用于退格..
我发现我必须使用 keydown 而不是 keypress 但仍然感谢您的帮助

2021 年更新：使用 keyup 和 event.key

2021 年更新：使用 `keyup` 和 `event.key`