JavaScript AddEventListener - Backspace

Question

你好，我正在尝试根据文本框中的内容获取某些按钮来启用/禁用。在使用“backspace”事件时，我希望检查textbox中每个操作的内容，这样启用/禁用按钮的状态就会相应改变。'backspace‘将用于删除文本框中的内容，但是根本没有检测到'backspace’(使用console.log测试)。

下面是代码(它适用于'c‘，但不适用于'backspace')：

​

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 />

​

如何让它检测'backspace‘按下的时间？我用其他字母进行了测试，它运行得很好，也尝试了执行“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 />

​

Answer 2

$(document).keyup(function(e)
{
    if(e.key == "c")
    {
        alert("C Pressed");
        document.getElementById("btnConvert").click();
    }
    var convertButton = document.getElementById("btnConvert");

    if(e.keyCode == 8)
    {
        alert('backspace trapped');
        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" autofocus />