Search code examples
javascriptjquerykeypress

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


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

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