Textbox to accept only numbers (digits) using jquery

Posted on April 16, 2008
Filed Under how-to, javascript, jquery, tutorial

Few days back, my friend Parleen asked me how can we make a textbox which just accepts only numbers specially digits only. And, for his I come up with this solution of textbox which only accepts digits, and if you try to enter any alpha bates in it then it displays the error message with animation.

View Demo

HTML Code

<input type="text" name="quantity" id="quantity" /> <span id="errmsg"></span>

As you can see above, I’ve given the name and id of textbox to “quantity” in this example.This is the textbox which only accepts numbers (digits only). You can see “span” after textbox which is used to display the error message with fading effect using jQuery.

Javascript Code

First of all, we need to use jQuery library as we’re using the jquery’s function to accept only digits.

<script type="text/javascript" src="jquery.js"></script>

Now le’ts write the code in JavaScript using jQuery to accept only digits in textbox and displaying error with animation.

//when key is pressed in the textbox$("#quantity").keypress(function (e)
{
  //if the letter is not digit then display error and don't type anything
  if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57))
  {
    //display error message
    $("#errmsg").html("Digits Only").show().fadeOut("slow");
    return false;
  }
});

When the key is pressed, we’re using the key’s ASCII value to check which button is pressed. In first expression, delete, tab or backspace button is is checked and “8″ is the ASCII values of the Back-space. Digits are checked in the second expression. “48″ is the ASCII values of “0″ and “57″ is the ASCII values of “9″. The the ASCII values of the other digits lies between “48″ to “57″. And, if the key pressed values doesn’t lies withing these range, then we are displaying the error message with jQuery’s fading effect.

And, the “return false” statement means that this functions returns false values which means not to type anything on the text box.

Download Full Source Code

Popularity: 24% [?]

Follow me on twitter at http://twitter.com/roshanbh.

» Understanding and Validating Integers in PHP
» Php function to validate two decimal places of a number
» Email address validation in PHP
» How to make rounded corner textbox using css

Comments

18 Responses to “Textbox to accept only numbers (digits) using jquery”

Gabe on April 16th, 2008 6:07 pm

Nice little script, it can be very useful for developers, and it provides the user with immediate feedback rather than waiting until they click “submit” and giving them the message then. I’ll definitely have to use it, thanks!
PHP Coding School » Blog Archive » php tips [2008-04-16 18:09:41] on April 16th, 2008 6:10 pm

[...] Textbox to accept only numbers (digits) using jquery By Roshan Few days back, my friend Parleen asked me how can we make a textbox which just accepts only numbers specially digits only. And, for his I come up with this solution of textbox which only accepts digits, and if you try to enter any alpha … Roshan Bhattarai’s Blog - PHP… - http://roshanbh.com.np [...]
Roshan on April 17th, 2008 2:54 pm

You are always welcome gabe…
sunless on April 18th, 2008 10:22 am

What about copy/paste or mark/drag/drop text with mouse?
Roshan on April 18th, 2008 10:40 am

oh right…..you can write the condition to do that
Konr on April 18th, 2008 3:02 pm

And continuing on with sunless’s response, it should allow a Ctrl+V for digits. But it doesn’t because the V isn’t a digit.
Ian on April 18th, 2008 4:41 pm

Along the same lines of what Konr pointed out, none of my other browser keyboard shortcuts work as long as the focus is in that text box. Ctrl+W, for example, does not close the tab.
Nikolay on April 21st, 2008 9:52 am

Very good solution !
I’ll be using this, thnx !!

bug: works shift+ins (paste any text)

bugfix:

$(el).keypress(function (e)
{
//if the letter is not digit then display error and don’t type anything
if((e.shiftKey && e.keyCode == 45) || e.which!=8 && e.which!=0 && (e.which57))
{
//display error message
$(”#errmsg”).html(”Digits Only”).show().fadeOut(”slow”);
return false;
}
});

next bug: ctrl+v and shift+ins allowed in Safari 3.02
I can’t fixed it because of the peculiarities Safari event keyCode’s
Roshan on April 21st, 2008 12:04 pm

Good job Nikolay…….nice to hear that….
Niel on April 24th, 2008 5:01 pm

Nice little script, beside ctrl+v or shift+ins i found another bug if user pasted alpha chars using right click then pasting it, it doesn’t prevent user from that…
ryan john majarais on April 27th, 2008 9:31 am

thanks for the code….
Help PHP form, Input type for Mobile Number. - TechEnclave on May 20th, 2008 8:38 am

[...] permalink Thanls for reply nukeu666.. Done.. I used this one Textbox to accept only numbers (digits) using jquery [...]
Help PHP form, Input type for Mobile Number. - TechEnclave on May 20th, 2008 1:33 pm

[...] Thanls for reply nukeu666.. Done.. I used this one Textbox to accept only numbers (digits) using jquery #7 Today, 05:12 [...]
fedmich on June 1st, 2008 6:17 pm

This is cool stuff, though I knew it already last year and there was no jQuery then.
good work anyway
Roshan on June 2nd, 2008 4:27 am

oh thanks anyway fedmich….
first dandy on July 9th, 2008 5:32 am

no more annoying error message
just replace space & alphabet with null

$(’.numberonly’).keyup(function(e) {
if(e.which==13) return false;
c = $(this).val().replace( /[A-Za-z\s]/g ,”);
$(this).val(c);
})
Jay on July 10th, 2008 4:59 am

Awesome script, but whenever I try to hit enter to submit the form it shows the error of “Digits Only” how can I fix this?
Dmitri on August 22nd, 2008 10:44 am

Thanks helped a lot.