Jump to: navigation or main content.

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;
		}
	}
}

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)

What others have said about this blog post.

  1. 17 Sep 2008 Nitin Gautam said:

    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

  2. 17 Oct 2008 Kevin J. Scott said:

    Great example...thanks! ..Kev

  3. 25 Feb 2009 Kyle said:

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

  4. 26 Feb 2009 Stewart said:

    Hi Kyle, try doing something like this:

    document.getElementById("input1").onkeypress = function() {
     restrictCharacters(this,event,digitsOnly);
    }

  5. 27 Feb 2009 Wrawlibitatte said:

    Thank you!

  6. 28 Apr 2009 Alin Mircea said:

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

  7. 29 Jul 2009 Nico said:

    Great, thanks a lot !!!!

  8. 24 Sep 2009 lakshman said:

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

  9. 29 Sep 2009 Stewart said:

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

  10. 16 Oct 2009 Amit Kumar said:

    Good, Superb, & fantstic code thanx alot!!!

  11. 29 Oct 2009 Satya Prakash said:

    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

  12. 25 Nov 2009 JC said:

    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

  13. 02 Dec 2009 Stewart said:

    Updated the code, thanks JC.

  14. 24 Dec 2009 lakshman said:

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

  15. 03 Feb 2010 Paul Gardner said:

    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?

  16. 03 Feb 2010 Stewart said:

    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) {

  17. 03 Feb 2010 Paul Gardner said:

    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.

  18. 26 Mar 2012 parag said:

    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

  19. 26 Mar 2012 said:

    Parag, Try something like:

    var alphaOnly = /[\sA-Z,a-z,1234567890]/g;


This thread has been closed from taking new comments.