JavaScript: Restrict keyboard character input

If you want to improve your form inputs by restricting the characters the user enters, this function might come in handy. It restricts the keyboard input for a text field so that they can only enter the characters you want.

How could this be used?

But why would you want to do this? Well it means your users cannot enter the wrong characters accidentally and have the form fail when it is validated. It also makes inputting data a little bit faster! It should not be used as the only method of validating your forms as the users can turn javascript off and enter whatever they like anyway, but it is a nice, lightweight little add-on for your forms.

You can add further restrictions by creating your own regular expressions at the top to restrict to email-only characters, telephone characters and more! If you are looking for something in particular, get in touch!

/* code from qodo.co.uk */
// create as many regular expressions here as you need:
var digitsOnly = /[1234567890]/g;
var floatOnly = /[0-9\.]/g;
var alphaOnly = /[A-Za-z]/g;

function restrictCharacters(myfield, e, restrictionType) {
    if (!e) var e = window.event
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    var character = String.fromCharCode(code);
    // if they pressed esc... remove focus from field...
    if (code==27) { this.blur(); return false; }
    // ignore if they are press other keys
    // strange because code: 39 is the down key AND ' key...
    // and DEL also equals .
    if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
        if (character.match(restrictionType)) {
            return true;
        } else {
            return false;
        }
    }
}

Updates

Updated 01/12/2009: As pointed out by JC, alpha wasn't allowing lowercase characters. This has been corrected. Also, integer is a whole number so should probably be labelled as float instead.

Download

Download the example JavaScript: Restrict keyboard character input now!

Comments 19

  1. What if i want to restrict user input to 6 integer up to two decimals (999999.99) Valid enteries are .22 0.22 12.23 etc Nitin Gautam

  2. Great example...thanks! ..Kev Kevin J. Scott

  3. excellent, but alas, i can't trigger the event like this: document.getElementById("input1").onkeypress = new Function('restrictCharacters(this,event,digitsOnly)'); Kyle

  4. Hi Kyle, try doing something like this: 
    document.getElementById("input1").onkeypress = function() {
 restrictCharacters(this,event,digitsOnly);
}
    Stewart

  5. Thank you! Wrawlibitatte

  6. you should go with myfield.blur(); instead of this.blur() Alin Mircea

  7. Great, thanks a lot !!!! Nico

  8. what if i want to restrict only one . as input in integerOnly. lakshman

  9. Hi lakshman. Do you mean so that you only have 1 decimal (.) ? Stewart

  10. Good, Superb, & fantstic code thanx alot!!! Amit Kumar

  11. The last input field is only accepting Upper case alpha. and also it takes anthing with shift key pressed. http://www.qodo.co.uk/wp-content/uploads/2008/05/javascript-restrict-keyboard-character-input.html Satya Prakash 

  12. Change /[A-Z]/g to /[a-z,A-Z]/g
    also not that techinically integers DO NOT include a decimal point so I think you've got digitsOnly and integerOnly swapped by accident JC

  13. Updated the code, thanks JC. Stewart

  14. [as on Sup 29 2009] Hi Stewart, yes only one digit(.) lakshman

  15. Great script .. I'm tryig to use it to replicate the username field treatment on twitter so it only allows 0-9 A-Z a-z and underscore. I am using /[0-9A-Za-z_]/g but it's also allowing the chars $ % & (. Your example alpha script also allows these extra chars. Any ideas anyone? Paul Gardner

  16. Hi Paul. A few people have said something similar to this. You could change the line to: 
    if (!e.ctrlKey && code!=9 && code!=8 && (code!=39 || (code==39 && character=="'")) && code!=40) {
    Stewart

  17. i want to allow user to enter alphabates,number and space. i used 
    var alphaOnly = /[A-Z,a-z,1234567890]/g;
    but it is not allowing the space . help parag

  18. Parag, Try something like: 
    var alphaOnly = /[\sA-Z,a-z,1234567890]/g;

  19. I give up. Came across http://www.quirksmode.org/js/keys.html which shows that reliably detecting key/charCodes across all browsers and OS is a minefield and do not want to risk people not being able to use my forms. Will revert to server-side validation for non-allowed chars. I was getting somewhere when I realised that chars 36, 37, 38, 39 and 40 were duplicated as the arrow and home keys and was checking for existence of shift key, but FireFox and IE have different behaviours and that's just on Windows. Hey ho, nice idea .. anyone know one of the twitter developers really well as they seem to have this licked?!? Paul. Paul Gardner
  1. 1

Got something to say?

Join the discussion! You know how these things work; enter your details and comments below and be heard.

  1. Allowed tags: <b><i><br>