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

I t开发者_如何学Pythonried 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?

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.

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.');
    }
});

If you only want to do something when the input of the field actually changes you should use the input event instead of the keypress event. If you want to support IE < 9 these days, you will need its propietary propertychange event as well.

In jQuery you can use it like this:

$('input').on('propertychange input', function (e) {
    // will fire directly but only when input changes
});

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