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. 确保不存在阻止代码执行的脚本错误。您可以检查调试控制台来检查是否有错误。