jQuery library for getting keyboard key pressed from code

Question

I'm having some problems with my function that turns keycodes into keyboard keys. I originally had a giant switch statement, and if the code were, say, 37, my program would output "left arrow key." My problem is, different browsers are not firing certain keypresses, and sometimes the codes get mixed up. For instance, shift + 7 on a mac running Chrome outputs the code 37, which is a left arrow keypress. Firefox on mac does not tell me if the tab key is pressed, etc.

Here is the code I was working with:

    function getKey(code) { 

    var keyPress;

    // In case of special keys

    switch (code)
    {
        case 8:
            keyPress = " backspace ";
            break;
        case 9:
            keyPress = " tab ";
            break;
        case 13:
            keyPress = " enter ";
            break;
        case 16:
            keyPress = " shift ";
            break;
        case 17:
            keyPress = " control ";
            break;
        case 18:
            keyPress = " alt ";
            break;
        case 20:
            keyPress = " caps lock ";
            break;
        case 27:
            keyPress = " escape ";
            break;
        case 46:
            keyPress = " delete ";
            break;
        case 37:
            keyPress = " left arrow key ";
            break;
        case 38:
            keyPress = " up arrow key ";
            break;
        case 39:
            keyPress = " right arrow key ";
            break;
        case 40:
            keyPress = " down arrow key ";
            break;
        case 45:
            keyPress = " insert ";
            break;
        case 46:
            keyPress = " delete ";
            break;
        case 91:
            keyPress = " command ";
            break;
        default:        
            keyPress = String.fromCharCode(code);       
    }

    return keyPress;

}

    $(document).keypress(function(e) {

    var code = e.which;

    var keyPress = String.fromCharCode(code);

    $(".keystrokes").append(keyPress);

});

So, are there any libraries for jquery that can accurately give me the correctly-pressed key?

http://stackoverflow.com/questions/2353417/which-is-the-best-javascript-keyboard-event-library-hotkeys-shortcuts — Will M, Jul 17 '13 at 18:05
No. I don't want to listen for a specific keypress, I want, every time a key is pressed, to get which key is pressed. — Witch-King, Jul 17 '13 at 18:21
I must be missing something, because those sound like the exact same things. Or at least, you could use some of those libraries to do what you like rather than have a bunch of control flow. — Will M, Jul 17 '13 at 18:58
Well, if I'm correct, those libraries have you bind an event and check to see if that specific key is pressed. Do they work to just get whatever key is pressed instead of listening for a specific one? — Witch-King, Jul 17 '13 at 19:04
I understand now. Check out: http://keithcirkel.co.uk/jwerty/ You're looking for `jwerty.is()` — Will M, Jul 17 '13 at 19:13
Well, that still checks for a specific key. I want a library where, let's just say you press a random key, it will tell you what it is. — Witch-King, Jul 17 '13 at 19:18

score 0 · Answer 1 · answered Jul 17 '13 at 18:35

I don't know of a library that does what you want, but the switch would work with the correct data.

keypress() returns the actual text entry. keyup() returns the key code. You'll need to examine the event.where to get the key, event.shiftKey, event.metaKey, event.ctrlKey to get the modifiers.

From http://api.jquery.com/keyup/

To determine which key was pressed, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the key code. This code corresponds to a key on the keyboard, including codes for special keys such as arrows. For catching actual text entry, .keypress() may be a better choice.

Will M · Answer 2 · 2013-07-17T20:18:22.557

0

You're looking for jQuery++'s event.key extension: http://jquerypp.com/#key

You could just like the following:

$( <query> ).on('keypress', function(ev){
  // Backspace
  if(ev.keyName() == '\b') {
    ...
  }
);

Tab key: \t
Enter key: \r
Shift key: shift

Check out the annotated source for more: http://jquerypp.com/release/latest/docs/key.html

edited Jul 17 '13 at 20:18

answered Jul 17 '13 at 20:10

Will M

2,135
4
22
32

jQuery library for getting keyboard key pressed from code

2 Answers2