Chrome 扩展程序中的“keydown”事件出现问题：捕获 Backspace 操作

Question

我正在创建一个 Chrome 扩展程序（代码此处），但在处理“keydown”事件时遇到了问题。我想用它在发生之前捕获“退格”，以便在删除之前切换用户正在输入的文本。然而，按照我目前的做法，包括创建一个函数

keyDown(event){...}

并添加

document.addEventListener("keydown", keyDown)

，当调用该函数时，

event.srcElement.innerText

包含删除发生后的文本。澄清一下，如果可编辑元素包含“abcd”并且我按退格键，我将从事件处理程序中获取文本“abc”，而不是“abcd”。

附注如果您查看我的代码并发现任何其他问题，请告诉我。我不是经验丰富的开发人员，希望得到任何意见。

Answer 1

您需要使用 e.preventDefault() 函数“防止默认行为”。这将防止目标输入像往常一样被修改。

这正在这个小脚本示例中工作，因此希望它在扩展中也能类似地工作。

function keyDownHandler(e) {
  console.log(e.key);
  if (e.key == 'Backspace') {
    // prevent removal of character from input
    e.preventDefault();
    // diagnostics and info, not needed
    console.log('backspace pressed');
    console.log(e.target.value);
  }
}

let reference = document.querySelector('#test');
reference.addEventListener('keydown', keyDownHandler);

<input id="test" type="text" placeholder="things">
</>