Allow Only Numbers in a Textbox

pradeep's Avatar author of Allow Only Numbers in a Textbox
Contributed by ()
This is an article on Allow Only Numbers in a Textbox in JavaScript and AJAX.
Sometimes we need the user to enter only numbers in a text field, so I have some up with a small piece of JavaScript to do exactly that. It works for both IE and Firefox.

Code: JavaScript
function onlyNumbers(evt)
{
    var e = event || evt; // for trans-browser compatibility
    var charCode = e.which || e.keyCode;

    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;

    return true;

}
Example Usage:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Allow Only Numbers
</HEAD>

<BODY>
<script language="JavaScript">
function onlyNumbers(evt)
{
	var e = event || evt; // for trans-browser compatibility
	var charCode = e.which || e.keyCode;

	if (charCode > 31 && (charCode < 48 || charCode > 57))
		return false;

	return true;

}
</script>
<input type="text" onkeypress="return onlyNumbers();">
</BODY>
</HTML>
julymaryrea_13 like this

Light Poster
6Jun2007,12:46   #2
vikas's Avatar
thanks for this but u must mention the comments as much as possible so that other readers could eaisily get this. thx again
Newbie Member
13Jun2007,22:15   #3
Vivid's Avatar
Is there any way to add the ability to enter in the "-" character as well. I think it is key code 109 or 189. I can't seem to get it to accept only numbers and this one extra character.
Go4Expert Founder
14Jun2007,08:56   #4
shabbir's Avatar
I am not a JS expert but you need to edit the condition
Code:
if (charCode > 31 && (charCode < 48 || charCode > 57))
so that when its 109 or 189 then it does not return false.
Team Leader
14Jun2007,12:20   #5
pradeep's Avatar
Shabbir is right you just have to modify the condition to suit your needs, e.g.

Code: Javascript
if (charCode > 31 && ((charCode < 48 || charCode > 57) || charCode !=109))
  return false;

That should do it!
Ambitious contributor
14Jun2007,14:40   #6
Darkness1337's Avatar
wow, really good!
thanx a lot! this helps to get me some more marks on my web designing course lol
Newbie Member
23Aug2008,21:19   #7
Miles Tegg's Avatar
Not so smart. This doesn't allow for the shift key being pressed, so allows any of !"£$%^&*() as well as any numeric.

Obviously (??) the onKeyDown etc doesnt detect Shift1 etc.

So as a validation before assigning to a numeric field then this just doesnt work.
Newbie Member
23Aug2008,22:41   #8
Miles Tegg's Avatar

The problem with the shift key can be fixed as follows :
{
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;

if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
if (e.shiftkey) return false;
return true;

}
The down side of this is that it efectively disables the numeric key pay because the Num Lock sets the shift key.

You probably need to extend the numeric character set tested for to include a decimal point . or , depending upon convention, the thousand marker , and + and - to detect signs and on occasions the currency symbols such as £$ etc
Newbie Member
2Mar2009,20:11   #9
darksemo's Avatar
Helloo,
I'm not a javascript expert also, but this function has a parameter and we when we called it down , it doesn't talk any parameters . How Come?
Banned
19Jun2009,15:40   #10
gkumar's Avatar
In this example we can allow Only Numbers in a Textbox.
HTML Code:
<HTML>
   <HEAD>
   <SCRIPT language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }
      //-->
   </SCRIPT>
   </HEAD>
   <BODY>
      <INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
   </BODY>
</HTML>
Page 1 of 2
1
2