jQuery restrict characters that can be entered into input

Question

I have the following jquery which forces characters entered into an input box into uppercase.

jQuery(document).ready(function() {
    jQuery('.uppercase').keyup(function()
    {
        jQuery(this).val(jQuery(this).val().toUpperCase());
    });
});

I want to restrict input so that only english alpha-numeric characters can be entered. What's the best way of tackling this?

[Similar Question here.](http://stackoverflow.com/questions/895659/how-do-i-block-or-restrict-special-characters-from-input-fields-with-jquery) I believe the answer is what you are looking for. — Jackanapes, Nov 20 '16 at 18:30

Christian Vincenzo Traina · Answer 1 · 2016-11-20T18:54:31.300

0

You can use a regular expression to replace each special character to void.

jQuery(document).ready(function() {
    jQuery('.uppercase').keyup(function()
    {
        jQuery(this).val(jQuery(this).val().replace(/[^\w\s]/gi, '').toUpperCase());
    });
});

You are sending what specified by regular explession to void character ('').

In the regular expression you can see the key ^ which means not, the key \w which means alphanumeric characters and \s which means spaces characters. So you are sending to void everything that's not alphanumeric and that's not space.

Remove \s inside the RegEx if you dont't want to allow spaces in your field.

PS. this does not prevent a user to submit special characters, you have to check server-side.

An equivalent -but cleaner- regular expression could be:

/\W/gi

You can check the link above to see what this does mean

edited Nov 20 '16 at 18:54

answered Nov 20 '16 at 18:40

Christian Vincenzo Traina

9,546
2
40
63

That's pretty dense code. It would be helpful if you gave a brief description of what's going on in there. – Ouroborus Nov 20 '16 at 18:43
You are replacing what specified by regular explession to void character (''). In the regular expression you can see the key *^* which means *not*, the key *\w* which means *alphanumeric character* and *\s* which means spaces. So you are sending to void everything that's not alphanumeri and that's not space. Remove \s if you want to eliminate spaces by your field. PS. this not prevent a user to submit special characters, you have to check server-side – Christian Vincenzo Traina Nov 20 '16 at 18:44

score 0 · Answer 2 · answered Nov 20 '16 at 19:33

A very simple way to do what you want, is to catch the keydown event, then check the key ASCII code. If it's not between 0x30 (ASCII '0') and 0x39 (ASCII '9') and it's not between 0x41 (ASCII 'A') and 0x7a (ASCII 'z'), then you just cancel the event by calling event.preventDefault. You can also prevent user by typing lowercase characters, if you change the last ASCII check from lower 'z' (0x7a) to upper 'Z' (0x5a). Also you can have CSS text-transform: uppercase; so the user does not see the transition between lower and upper conversion.

jQuery('#test').on('keydown', function(e) {
    var charCode = e.key.charCodeAt(0);
    if (!((charCode >= 0x30 && charCode <= 0x39) || (charCode >= 0x41 && charCode <= 0x7a))) {
        e.preventDefault();
    }
});

jQuery('#test').on('keyup', function(e) {
    jQuery(this).val(jQuery(this).val().toUpperCase());
});

input#test {
    text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test">

If you use the second condition with the upper 'Z' (0x5a), then the keyup conversion to upper event call is pointless, because you won't have any lower charcters input.

jQuery restrict characters that can be entered into input

2 Answers2