Jquery: filter input on keypress

Fernando picture Fernando · Jun 20, 2013 · Viewed 29.4k times · Source

I have a text field, which will accept only the following characters:

Allowed characters: [a-z 0-9 + # - .]

This is the same filter SO does in the 'Tags' field, when you're asking a question. If the user types an invalid character, i want the current text field value to remain unchanged. I tried:

$('#post_tags').keypress(function(event){
    var char = String.fromCharCode(event.which)
    var txt = $(this).val()

    if (! txt.match(/[^A-Za-z0-9+#-\.]/)){
        $(this).val(txt.replace(char, ''));
    }
})

Why it doesn't work? Thanks!

Answer

ExceptionLimeCat picture ExceptionLimeCat · Jun 20, 2013

This worked for me:

$(function(){
    $('#t').keypress(function(e){
        var txt = String.fromCharCode(e.which);
        console.log(txt + ' : ' + e.which);
        if(!txt.match(/[A-Za-z0-9+#.]/)) 
        {
            return false;
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="t" />