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?

score 28 · Accepted Answer · edited Sep 29 '15 at 17:11

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.

Good catch, and nice clean fix - this is an important note, as modifier keys may matter to OP as well. — cincodenada, Nov 26 '13 at 00:25
That would explain a few edge cases where I thought the keyboard wasn't working. Thanks for the fix! — twig, Nov 27 '13 at 04:42
This won't work if you use a combination of keys to type a character. For example, `alt + a` (`å`) on a Mac should fire the onkeyup event, but it doesn't. — Marian, Dec 21 '16 at 14:02

score 28 · Answer 2 · edited May 23 '17 at 12:26

28

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

edited May 23 '17 at 12:26

Community

1
1

answered Feb 18 '10 at 20:05

Andras Vass

11,478
1
37
49

Thanks, thats similar to the solution I ended up implementing! – twig Feb 19 '10 at 11:12
2

Why use binary OR? "e.keyCode|e.charCode" May be should be "e.keyCode||e.charCode"? – Roman Nov 15 '13 at 12:42

score 0 · Answer 3 · answered Dec 21 '16 at 14:12

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

I cant believe this answer hasn't gotten more upvotes. This worked the best for me! — , Jul 07 '17 at 09:48

score 0 · Answer 4 · answered Nov 09 '19 at 09:11

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

score -4 · Answer 5 · answered Feb 17 '10 at 22:28

-4

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

answered Feb 17 '10 at 22:28

Catfish

18,876
54
209
353

2

This will not work. `e` is the actual event, you need to capture the character to match the regular expression against. You can use `String.fromCharCode(e.which);` to capture the typed character. – scurker Aug 08 '11 at 13:24

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

5 Answers5

Linked

Related