Determine if JavaScript e.keyCode is a printable (non-control) character

I'd just like to know the range(s) of JavaScript keyCodes that correspond to typeable characters; or alternatively, the range of non-typeable (control) characters like backspace, escape, command, shift, etc. so I can ignore them.

The reason I ask is calling String.fromCharCode() is resulting in odd characters for control keys. For example I get "[" for left command, "%" for left arrow. Weirdness like that.

Solution 1:

Keydown will give you the keyCode of the key pressed, without any modifications.

$("#keypresser").keydown(function(e){
    var keycode = e.keyCode;

    var valid = 
        (keycode > 47 && keycode < 58)   || // number keys
        keycode == 32 || keycode == 13   || // spacebar & return key(s) (if you want to allow carriage returns)
        (keycode > 64 && keycode < 91)   || // letter keys
        (keycode > 95 && keycode < 112)  || // numpad keys
        (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
        (keycode > 218 && keycode < 223);   // [\]' (in order)

    return valid;
});

Only the number keys, letter keys, and spacebar will have keycodes correlating to String.fromCharCode as it uses Unicode values.

Keypress will be the charCode representation of the text entered. Note that this event won't fire if no text is "printed" as a result of the keypress.

$("#keypresser").keypress(function(e){
    var charcode = e.charCode;
    var char = String.fromCharCode(charcode);
    console.log(char);
});

http://jsfiddle.net/LZs2D/1/ Will demonstrate how these work.

KeyUp behaves similarly to KeyDown.

Solution 2:

Just for background, the "keypress" event will give you a charCode property whenever you press a character key.

Editor.addEventListener('keypress', function(event){
    if (event.charCode) {
        //// character key
        console.log( String.fromCharCode(event.charCode) ); /// convert charCode to intended character.
    } else {
        //// control key
    }

However, the "keypress" event doesn't capture every keystroke - several keys fire before the "keypress" event.

In contrast, the "keydown" event will capture every keystroke, but it doesn't have a charCode property. So how can we tell if it's a character key? Checking on every key stroke whether the keyCode is within the lower and upper bounds for multiple ranges isn't optimally efficient. I suspect that there are also issues for characters outside of the ASCII range.

My approach is the check the length of the event "key" property. The "key" property is an alternative to "keyCode" to determine which key was pressed. For control keys, the "key" property is descriptive (e.g. "rightArrow", "F12", "return", etc.). For character keys, the "key" property for a character key is just the character (e.g "a", "A", "~", "\", etc.). Therefore, for every character key, the length of the "key" property will have length of 1; whereas control characters will have length greater than 1.

Editor.addEventListener('keydown', function(event){
    if (event.key.length == 1){ 
        //// character key
    } else {
        //// control key
    }
})