Fernando Fernando - 2 months ago 21
Javascript Question

Jquery: filter input on keypress

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
/[^A-Za-z0-9+#-\.]/

This negates the match of any one of those characters. To make it match more than one character, you have to use a + in there:

/[^A-Za-z0-9+#-\.]+/
                  ^

And now to match the whole string, you need to add anchors:

/^[^A-Za-z0-9+#-\.]+$/
 ^                  ^

EDIT: Okay, it seems that the - here is also creating a range from character # to .. In this case, you can either escape it, or put it at the end:

/^[^A-Za-z0-9+#\-\.]+$/

/^[^A-Za-z0-9+#\.-]+$/