jQuery: how to filter out non-character keys on ke

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

You can use regular expressions like this

$('something').keypress(function(e) {
    if(e.match(YourRegularExpressionHere)) {
        //do something
    } 
});

This will only do something if it matches the regular expression.

Have a look at regular expressions. http://www.regular-expressions.info/javascript.html

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.

Answer 3

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 4

Checking for key combinations will not be the best solution in all cases. For example, if you use a key combinations to type a character, that will block the onkeypress event, when it shouldn't.

Try that here and you will see that it will not work: http://jsfiddle.net/4jx7v/

(On a Mac, try alt + a letter and on Windows, try alt + a series of numeric keys.)

An alternative to that would be to simply check if the input value has changed from the previous one, that way, you know for sure that something was typed.

JavaScript:

var previousValue;
$("input").keypress(function (e) {
    if (previousValue != $(this).val()) {
        alert('Something has been typed.');
    }
});