jQuery: how to filter out non-character keys on keypress event?

Question

I tried searching but unsure of what terms to look for.

I'm using jQuery and would like to use the keypress event in a textbox, but prevent all non-printable characters (ie. Enter, ESC, arrow keys, backspace, tab, ctrl, insert, F1-F12, etc) from triggering the event.

Is there an easy way to determine if it is printable?

Solution 1

The selected answer for this question is not complete. It does not handle the case where a character key is being pressed in combination with a modifier key (e.g. CTRL-A).

Try, for example, typing CTRL-A using firefox with the following code. The current answer will consider it as a character:

HTML:

<input placeholder="Try typing CTRL-A in Firefox" style="width: 200px"/>

JavaScript:

$("input").keypress(function (e) {
    if (e.which !== 0) {
        alert(String.fromCharCode(e.which));
    }
});

http://jsfiddle.net/4jx7v/

Note: an alert won't be fired if using some browsers (such as Chrome), since they don't fire a keypress event for non-character inputs.

A better solution might be:

HTML:

<input placeholder="Try typing CTRL-A in Firefox" style="width: 200px"/>

JavaScript:

$("input").keypress(function (e) {
    if (e.which !== 0 &&
        !e.ctrlKey && !e.metaKey && !e.altKey
    ) {
        alert(String.fromCharCode(e.which));
    }
});

http://jsfiddle.net/hY5f4/

In this case, the alert is only being fired when A is pressed, not CTRL-A for all browsers.

Solution 2

<script>
    $("input").keypress(function (e) {
        if (e.which !== 0 &&
            !e.ctrlKey && !e.metaKey && !e.altKey) {
            alert(String.fromCharCode(e.which));
        }
    });
</script>

Seems to work just fine with jQuery 1.4.2, FF, IE, Chrome.

To delve into the mess that is JS keyboard event handling, see: JavaScript Madness: Keyboard Events

---

Updated to filter ctrl, meta & alt key combinations as per Daniel's comment.

Comments

[twig]

Thanks, thats similar to the solution I ended up implementing!

[scurker]

This will not work. e is the actual event, you need to capture the character to match the regular expression against. You can use String.fromCharCode(e.which); to capture the typed character.

[Roman]

Why use binary OR? "e.keyCode|e.charCode" May be should be "e.keyCode||e.charCode"?

[cincodenada]

Good catch, and nice clean fix - this is an important note, as modifier keys may matter to OP as well.

[twig]

That would explain a few edge cases where I thought the keyboard wasn't working. Thanks for the fix!

[Marian]

This won't work if you use a combination of keys to type a character. For example, alt + a (å) on a Mac should fire the onkeyup event, but it doesn't.

[Admin]

I cant believe this answer hasn't gotten more upvotes. This worked the best for me!