如何检查按键是否被按下？

Question

我在谷歌上搜索了但仍未找到我想要的答案。

我想检查用户是否按下了键，类似这样 -

if(document.onkeyup) {
   // Some Stuff here
}

我知道可以这样做 -

document.onkeyup = getKey;

但是函数 getKey 无法返回值。

那么我如何检查用户是否按下了按键？

编辑：我需要使用纯JavaScript来实现这个功能。

- julian

---

你有没有了解过一个叫做jQuery的JS库？它有非常好用的keypressed事件，可以让编程变得更加容易。 - ryanc1256

@ryanc1256 我很擅长jQuery，但这个项目需要纯JavaScript..所以我需要一个JavaScript的答案。 - julian

Answer 1

您可以使用事件对象在纯JavaScript中完成此操作，无需使用外部库（例如jQuery）。

要捕获按键码，只需将事件作为getKey函数的参数传递即可：

function getKey(e)
{
    window.alert("The key code is: " + e.keyCode);
}

document.onkeyup = getKey;

常用keyCode列表：

如果您需要一个有用的keyCode列表，可以查看以下链接：

http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

将keyCode设置为全局变量：

如果您希望捕获keyCode以供以后使用，可以像这样做：

var keycode = "";

(...)

function getKey(e)
{
    keycode = e.keyCode;
}

document.onkeyup = getKey;


window.alert("The key code is: " + keycode);

将keyCode设置为事件源对象：

如果你不喜欢全局变量，就像我一样，你也可以这样做：

function getKey(e)
{
    keycode = e.keyCode;

    var objectFromEvent = e.currentTarget ? e.currentTarget : event.srcElement;

    objectFromEvent.customProperty = keycode;
}


document.customProperty = "";
document.onkeyup = getKey;

// now the value is in the "customProperty" of your object =)

window.alert("The key code is: " + document.customProperty);

- canolucas

---

很好，但问题在于我无法返回keyCode。 我无法在此函数中返回e.keyCode。 - julian

你不能这样做，但是你可以将它分配给一个全局变量以备后用。 - canolucas

非常感谢 :) 已接受您的答案。 - julian

Answer 2

您可以使用变量来实现，然后您可以在其他地方检查该变量...

例如：

    var keypressed = "";
    document.onkeyup = function(e){

    if (typeof event !== 'undefined') {
        keypressed = event.keyCode;
      }
      else if (e) {
        keypressed = e.which;
      }  

  return false;   // Prevents the default action

}

- ryanc1256

Answer 3

您需要将事件附加到全局窗口对象，并设置一个监听事件的函数。此示例向您展示如何跟踪 keyup 和 keydown 事件。

window.addEventListener('keydown', onKeyDown, true);
window.addEventListener('keyup', onKeyUp, true);

function onKeyDown(evt) {
  // key up event as been fired
  console.log(evt.keyCode);
}

function onKeyUp(evt) {
  // key up event as been fired
  console.log(evt.keyCode);
}

请参阅 MDN 上的 element.addEventListener 以获取更多详细信息。

- zoom

Answer 4

你真的不应该这样做，但如果你非要这么做：

var getKey = (function () {
  var currentKey = null;

  document.onkeyup = function (event) {
    // determine the pressed key (across browsers)
    // by inspecting appropriate properties of `event`
    // and update currentKey; E.g:
    currentkey = event.which ? event.which : window.event.keyCode;
  }

  return function () {
    return currentkey;
  }
})();

这将给您最后一个按下的键。

如果您需要获取当前按下的键（直到释放），则需要附加 keydown 事件以更新 currentKey 变量和 keyup 事件以将其设置为 null。

- Marko Dumic

Answer 5

如果您想测试某个按键是否被按下，可以使用以下代码。

document.addEventListener('keydown', function(event) {
    var key_code = event.keyCode;
    if (key_code === 38) {
        alert('test);
    } 
});

- ale

Answer 6

我会使用jQuery，然后像这样做：

   // arrow keys click
$(document).keyup(function(e) {
    // left arrow
    if (e.keyCode == "37" ) {
        // left stuff
    // right arrow
    } else if (e.keyCode == "39") {
        // right stuff
    // up arrow
    } else if (e.keyCode == "38") {
        // up stuff
    // down arrow
    } else if (e.keyCode == "40") { 
        // down stuff
    }
});

等等，对于这里看到的不同键码http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes，

- Jessie Frazelle

---

他在我的评论中指定了纯JS，意思是使用原生JavaScript编写。 - ryanc1256