How can I check that a key has been pressed?

Question

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

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

Solution 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

}

Solution 3

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.

Solution 4

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.

View more solutions

Comments

[ryanc1256]

as he specified in my comment he said pure js

[julian]

Great, but the problem with this, is that i can't return the keyCode. I can't return e.keyCode in this function.

[canolucas]

you can't, but you could assing it to a global variable for later usage

[julian]

Thanks a lot :) Accepted your answer.