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 formsas 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. 17Sep2008 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. 17Oct2008 Kevin J. Scott said:

    Great example...thanks! ..Kev

  3. 25Feb2009 Kyle said:

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

  4. 26Feb2009 Stewart said:

    Hi Kyle, try doing something like this:

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

  5. 27Feb2009 Wrawlibitatte said:

    Thank you!

  6. 28Apr2009 Alin Mircea said:

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

  7. 29Jul2009 Nico said:

    Great, thanks a lot !!!!

  8. 24Sep2009 lakshman said:

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

  9. 29Sep2009 Stewart said:

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

  10. 16Oct2009 Amit Kumar said:

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

  11. 29Oct2009 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. 25Nov2009 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. 02Dec2009 Stewart said:

    Updated the code, thanks JC.

  14. 24Dec2009 lakshman said:

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

  15. 03Feb2010 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. 03Feb2010 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. 03Feb2010 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. 26Mar2012 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. 26Mar2012 said:

    Parag, Try something like:

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


Got something to say?

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

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