Sorry, my site is very outdated – a new one is coming soon!

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 */
// 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;


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.


Comments 19

  1. Good, Superb, & fantstic code thanx alot!!! Amit Kumar
  2. Parag, Try something like:
    var alphaOnly = /[\sA-Z,a-z,1234567890]/g;
  3. 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
  4. I give up. Came across 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
  5. 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) {
  6. 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
  7. [as on Sup 29 2009] Hi Stewart, yes only one digit(.) lakshman
  8. Updated the code, thanks JC. Stewart
  9. 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
  10. The last input field is only accepting Upper case alpha. and also it takes anthing with shift key pressed. Satya Prakash
  11. 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
  12. Hi lakshman. Do you mean so that you only have 1 decimal (.) ? Stewart
  13. what if i want to restrict only one . as input in integerOnly. lakshman
  14. Great, thanks a lot !!!! Nico
  15. you should go with myfield.blur(); instead of this.blur() Alin Mircea
  16. Thank you! Wrawlibitatte
  17. Hi Kyle, try doing something like this:
    document.getElementById("input1").onkeypress = function() {
  18. excellent, but alas, i can't trigger the event like this: document.getElementById("input1").onkeypress = new Function('restrictCharacters(this,event,digitsOnly)'); Kyle
  19. Great example...thanks! ..Kev Kevin J. Scott
  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>