JavaScript keyListener

Question

我试图在我的输入字段中添加一个键侦听器，但是我无法使它工作。我的输入类型是text和id= "code"。以下是我尝试过的：

document.querySelector('code').addEventListener('keypress', function (e) {
    var key = e.which || e.keyCode;
    window.alert(key);
});

和

document.getElementById('code').addEventListener("keydown", dealWithKeyboard, false);

function dealWithKeyboard(e) {
    if (window.event) { // IE
        keynum = e.keyCode;
    } else if (e.which) { // Netscape/Firefox/Opera
        keynum = e.which;
    }
    window.alert(keynum);
}

和

document.getElementById('code').onkeyup = function(e) {
    if (window.event) { // IE
        keynum = e.keyCode;
    } else if (e.which) { // Netscape/Firefox/Opera
        keynum = e.which;
    }
    window.alert(keynum);
}

但似乎都不起作用

Answer 1

您没有在document.querySelector()中使用正确的选择器。id值之前必须加上#，就像在document.querySelector('#code')中一样。

document.querySelector('#code').addEventListener('keypress', function (e) {
    var key = e.which || e.keyCode;
    console.log(key);
});

工作片段：

​

document.querySelector('#code').addEventListener('keypress', function (e) {
  var key = e.which || e.keyCode;
  log(key);
});

// show output
function log(x) {
  var div = document.createElement("div");
  div.innerHTML = x;
  document.body.appendChild(div);
}

Type some characters in the Input field here: 
<input id="code">

​

如果实现得当，您的document.getElementById('code')示例应该可以工作。

如果这仍然不起作用，那么检查另外两件事情：

1. 确保在加载DOM的相关部分之后执行此脚本。有几种方法可以确保这一点，但最简单的方法是将<script>标记定位在它所引用的HTML之后。
2. 确保没有阻止代码执行的脚本错误。您可以检查调试控制台以检查错误。