CODEWITHSUNDEEP
javascriptjquerykeypress
twig
twig

Reputation: 4184

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?

Upvotes: 39

Views: 34174

Answers (5)

dehart
dehart

Reputation: 1678

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

Upvotes: 0

Marian
Marian

Reputation: 1164

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

Upvotes: 0

Daniel
Daniel

Reputation: 461

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.

Upvotes: 28

Andras Vass
Andras Vass

Reputation: 11638

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

Upvotes: 28

Catfish
Catfish

Reputation: 19294

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

Upvotes: -4

Related Questions