jQuery: how to filter out non-character keys on keypress event?
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.
<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.