How can I check that a key has been pressed?

问题

Well I searched on google but still didn't found the answer I was looking for.

I want to check if the user pressed a key, something like this -

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

I know I can do this, this way -

document.onkeyup = getKey;

But the function getKey cannot return values.

So how can I check if the user pressed a key?

EDIT : I need pure javascript for this thing..

回答1:

You can do this in pure Javascript using the event object, without the need of external libraries such as jQuery.

To capture the keycode, just pass the event as parameter of getKey function:

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

document.onkeyup = getKey;

Frequently used keyCode list:

For a usefull list of keyCodes, you can check out this URL:

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

Setting the keyCode to a global variable:

If you are interested in capturing the keyCode for later usage, you can do something like this:

var keycode = "";

(...)

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

document.onkeyup = getKey;


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

Setting the keyCode to the event source object:

If you don't like global variables, like me, you could also do something like this:

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);

回答2:

One way you could do it is using variables and then you could check that variable some were else...

for example

    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

}

回答3:

You really should not be doing this but if you really must:

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;
  }
})();

This will give you the last key user pressed.

If you need to get the currently pressed key (until released) then you need to attach keydown event to update currentKey variable and keyup event to set it to null.

回答4:

You have to attach the event to the window global object and to set a function that listen to the event. This sample show you how to track the keyup and keydown events.

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);
}

See element.addEventListener on MDN for more details.

回答5:

I would use jquery and do something like this:

   // 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
    }
});

etc, for the different key codes seen here http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

回答6:

If you are attempting to run an event to test when a certain key is pressed, you can use this.

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

来源：https://stackoverflow.com/questions/14348175/how-can-i-check-that-a-key-has-been-pressed