Javascript numeric only text box

So working on an asp.net page I found I needed a numeric only text box that allowed numbers from 0-100 with no decimals. I found a range validator would do most of the work but I wanted to keep users from typing in bad values. So after some searching I found javascript has a good solution. I like whitespace so shrink if you're one of those white space freaks.

Update: someone was kind enough to point out an error in my JS! So I went through and made sure it works. And it did need a minor tweak to be correct. So thanks to the poster the corrected script and usage are below.

Update Again:

This is the new and improved function to allow for the tab key to tab out of the text box. IE allows this by default however Firefox really tightens down the text box and doesn't allow anything you don't specify. So I had to add the tab key press. I also cleaned up the code so it isn't a huge chunk of if blocks and is now much more succinct. Please feel free to test and use at will. To modify to allow different key presses you just need to modify the if statement.

The javascript:

// function to only allow numeric key presses in a textbox
// this doesn't stop pasting of non numeric values
function numeric_only( e )
{
// deal with unicode character sets
var unicode = e.charCode ? e.charCode : e.keyCode;

// if the key is backspace, tab, or numeric
if( unicode == 8 || unicode == 9 || ( unicode >= 48 && unicode <= 57 ) )
{
// we allow the key press
return true;
}
else
{
// otherwise we don't
return false;
}
}


The usage:

<input type="text" name="textbox1" id="textbox1" onkeypress="return numeric_only(event);" />

Comments

Anonymous said…
Do not work (IE 7 in MS Vista)!
Justin said…
Sorry the whole thing was broken as posted. You should be able to use the script and have it work correctly now.
Anonymous said…
Thanks Justin,
Works great!
(tested in
FireFox 2.0 vista
safari 1.3.2 OSX 10.3.9
IE 7.0.6 vista)
Justin said…
Great,

Glad it worked out for you. Thanks for posting how broken my code was!

Justin
Anonymous said…
it works.
dapo adisa said…
Great very very nice
kkkeke said…
Nice1

really nice

thankS!

every1 shd make this clean +simple code
Justin said…
From 1 Justin to Another....


Great Simple easy to Use. Could not have done better myself
sirivimol said…
That's work on FF.
Thank you a ton!
Anonymous said…
Good and simple but.... you can still paste in alpha characters
Justin said…
Yes this will only stop key presses. To stop a copy/paste you will need to use the onblur event. I have been meaning to take a look at updating this to take care of that issue.
Justin said…
@kartik

What browser are you running?
Usman said…
You rocks mate .. the script run just perfectly. I only need to allow TAB and Del key
if (unicode != 8 && unicode != 9 && unicode != 46)
{
// Rest processing
}
Justin said…
Ok the code has been updated and cleaned quite a bit. Usman I have added the tab key but the delete key is posing a problem with the unicode. I will investigate further and see if I can find a good solution.
Nick said…
Works perfect, thanks very much for this.
Andrea said…
Thanks for the tip! I was looking for a javascript to insert the dates, but I could not figure out how to block the entry of alphabetic characters!
said…
thanks! it works great!
Venky said…
Dude, its allowing us to copy the code and paste it. is there any way that we could avoid that. ??
Venky said…
i mean the special characters. i am able to copy and paste them.

Popular Posts