开发在线文本编辑器时无法检测Backspace按键，该如何监听退格键？

问题根因 #

你使用的keypress事件仅会在可打印字符输入时触发，Backspace属于非打印类功能按键，不会触发keypress事件，因此对应的判断逻辑无法生效。

修复步骤 #

1. 将监听事件从keypress替换为keydown，该事件对所有按键按下操作都会触发，包含功能键。
2. 补充Backspace对应的内容删除逻辑。
3. 建议提前缓存编辑器节点，避免每次事件触发都重复查询DOM，提升性能。

修正后的完整代码 #

// 提前缓存编辑器节点
const board = document.getElementById("board");

document.addEventListener("keydown", function (event) {
    console.log(event.key)
    if (event.key == "Enter") {
        board.innerText += '\n'
    } else if (event.key == "Backspace") {
        // 非空时才执行删除操作
        if (board.innerText.length > 0) {
            board.innerText = board.innerText.slice(0, -1);
        }
    } else {
        board.innerText += event.key
    }
});

额外优化提示 #

• 目前直接累加innerText的实现方式在内容较多时会有性能问题，后续可以考虑用contenteditable属性配合选区API实现更贴近真实编辑器的能力，支持选中区域删除、光标定位插入等功能。
• 可以阻止部分默认事件避免浏览器自带的快捷键冲突。

内容的提问来源于stack exchange，提问作者ICY Counter-Strike and League