How to REALLY limit the available character for an input field using jQuery?

Question

I just started adding JS-validation to a signup form and I want the username input field in a Twitter-style (using jQuery). That means that the input is limited to certain characters and other characters do not even appear.

So far, I've got this:

jQuery(document).ready(function() {
 jQuery('input#user_login').keyup(function() { 
    jQuery(this).val( jQuery(this).val().replace(/[^a-z0-9\_]+/i, '') );
  });
});

This solution works, but the problem is that the illegal character appears as long as the user hasn't released the key (please excuse my terrible English!) and the keyup event isn't triggered. The character flickers in the input field for a second and then disappears.

The ideal solution would be the way Twitter does it: The character doesn't even show up once.

How can I do that? I guess I'll have to intercept the input in some way.

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ tried that? — Kieran Senior, Dec 23 '09 at 14:36
Please note, that the user could still manipulate the code and send whatever they want, so server-side security and checkups are also needed. — Yossi, Dec 23 '09 at 23:07

James Wiseman · Answer 1 · 2009-12-23T14:33:20.973

3

Try using keydown instead of keyup

jQuery('input#user_login').keydown(function() {

Aside: You selector is slower than it needs to be. ID is unique, and fastest, so

jQuery('#user_login').keydown(function() {

Should suffice

You might want to consider capturing the keycode iself, before assigning it to the val

if (event.keyCode == ...)

Also, are you considering the alt, ctls, and shift keys?

if (event.shiftKey) {

if (event.ctrlKey) {

if (event.altKey) {

edited Dec 23 '09 at 14:33

answered Dec 23 '09 at 14:26

James Wiseman

29,946
17
95
158

Using keydown doesn't work. It looks like the input hasn't arrived in the jQuery('input').var() method and the illegal input is only replaced after a SECOND keystroke. So in a way it doesn't work. – Ole Spaarmann Dec 23 '09 at 14:28
So, just to confirm, keyup, keydown, and keypress do not work? – James Wiseman Dec 23 '09 at 14:30
Edited further - have you considered capturing event.keycode? – James Wiseman Dec 23 '09 at 14:33
Yap. But the strange thing is: On keydown the character disappears immediately. The only problem here is, that this only happens after I enter a second character. So I enter "-" and it stays where it is, that I enter "a" and the "-" disappears. Could this have something to do with my regular expression? Keypress doesn't work in some browsers and doesn't solve my problem. – Ole Spaarmann Dec 23 '09 at 14:34
My mistake, I read about it on stackoverflow... ( http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed ) – Ole Spaarmann Dec 23 '09 at 15:48

Tim Down · Accepted Answer · 2009-12-23T15:08:30.060

If you want to limit the characters the user may type rather than the particular keys that will be handled, you have to use keypress, as that's the only event that reports character information rather than key codes. Here is a solution that limits characters to just A-Z letters in all mainstream browsers (without using jQuery):

<input type="text" id="alpha">


<script type="text/javascript">

function alphaFilterKeypress(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    return /[a-z]/i.test(charStr);
}

window.onload = function() {
    var input = document.getElementById("alpha");
    input.onkeypress = alphaFilterKeypress;
};

</script>

Thanks, that whas it, I modified your code a little, check out my response. — Ole Spaarmann, Dec 23 '09 at 15:49

score 1 · Answer 3 · answered Dec 23 '09 at 15:53

Thanks @TimDown that solved the issue! I modified your code a little so it accepts backspace and arrows for editing (I post a reply to use code formatting).

Thank you very much.

function alphaFilterKeypress(evt) {
    evt = evt || window.event;

    // START CHANGE: Allow backspace and arrows
    if(/^(8|37|39)$/i.test(evt.keyCode)) { return; }
    // END CHANGE

    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);

    // I also changed the regex a little to accept alphanumeric characters + '_'
    return /[a-z0-9_]/i.test(charStr);
}

window.onload = function() {
    var input = document.getElementById("user_login");
    input.onkeypress = alphaFilterKeypress;
};

score -2 · Answer 4 · answered Dec 23 '09 at 14:52

-2

You can use the maxlength property in inputs and passwords: info (that's actually the way Twitter does it).

answered Dec 23 '09 at 14:52

Januz

527
2
4

"That means that the input is limited to certain characters and other characters do not even appear." I think it is, why go the complicated JS route when it can be done much easier and faster with plain html? – Januz Dec 23 '09 at 16:57
nope. I'm well aware of the maxlength property. I wanted to prevent CERTAIN characters from appearing in the input field (!"§/$&) – Ole Spaarmann Dec 24 '09 at 01:54

How to REALLY limit the available character for an input field using jQuery?

4 Answers4