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?

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

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