JavaScript AddEventListener - 退格键

Question

您好，我正在尝试根据文本框中的内容来启用/禁用某些按钮。使用“退格”事件时，我想检查每个操作的文本框的内容，以便按钮的启用/禁用状态相应地改变。 “退格”将用于删除文本框中的内容，但根本检测不到“退格”(使用 console.log 进行测试)。

以下是代码(它适用于“c”，但不适用于“退格键”):

document.addEventListener("keypress", function(event) 
{
  if (event.key == "c") 
  {
    console.log("C Pressed");
    document.getElementById("btnConvert").click();
  }

  var convertButton = document.getElementById("btnConvert");
  if (event.key == "Backspace") 
  {
    console.log("Backspace Pressed");
    var textboxContent = document.getElementById("txtFahrenheit").value;
    if (textboxContent.value == "" || textboxContent.value == "-")
    {
      convertButton.disabled = true;
    }
  }
})

<button id="btnConvert" onclick="convertPressed()">Convert</button>
<input id="txtFahrenheit" type="text" onkeypress="return fNumOnly(event);" autofocus />

如何让它检测何时按下“退格键”？ 我用其他字母进行了测试，效果很好，也尝试过执行“event.keyCode == 8”，但没有检测到任何结果。

Answer 1

您应该使用 keydown 而不是 keypress 来正确检测 Backspace:

document.addEventListener("keydown", function(event) 
{
  if (event.key == "c") 
  {
    console.log("C Pressed");
    document.getElementById("btnConvert").click();
  }

  var convertButton = document.getElementById("btnConvert");
  if (event.key == "Backspace") 
  {
    console.log("Backspace Pressed");
    var textboxContent = document.getElementById("txtFahrenheit").value;
    if (textboxContent.value == "" || textboxContent.value == "-")
    {
      convertButton.disabled = true;
    }
  }
})

<button id="btnConvert">Convert</button>
<input id="txtFahrenheit" type="text" autofocus />