如何检测网站上是不是按下了退格键？
Posted
技术标签:
【中文标题】如何检测网站上是不是按下了退格键？【英文标题】：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 行记录了什么？
有用吗？ ***.com/questions/2353550/…
@Jamiec 不，我试过它没有用。这让我很困惑
@AntonyNg 嗨，我也尝试了这些方法，但没有一个有效。
【参考方案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 但仍然感谢您的帮助以上是关于如何检测网站上是不是按下了退格键？的主要内容，如果未能解决你的问题，请参考以下文章
前端javascript如何阻止按下退格键页面回退 但 不阻止文本框使用退格键删除文本