Textbox to accept only numbers (digits) using jquery

Advertisement

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

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

40 Comments on “Textbox to accept only numbers (digits) using jquery”

  • Gabe wrote on 16 April, 2008, 18:07

    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!

  • Roshan wrote on 17 April, 2008, 14:54

    You are always welcome gabe…

  • sunless wrote on 18 April, 2008, 10:22

    What about copy/paste or mark/drag/drop text with mouse?

  • Roshan wrote on 18 April, 2008, 10:40

    oh right…..you can write the condition to do that

  • Konr wrote on 18 April, 2008, 15:02

    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 wrote on 18 April, 2008, 16:41

    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 wrote on 21 April, 2008, 9:52

    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 wrote on 21 April, 2008, 12:04

    Good job Nikolay…….nice to hear that….

  • Niel wrote on 24 April, 2008, 17:01

    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 wrote on 27 April, 2008, 9:31

    thanks for the code….

  • fedmich wrote on 1 June, 2008, 18:17

    This is cool stuff, though I knew it already last year and there was no jQuery then.
    good work anyway :)

  • Roshan wrote on 2 June, 2008, 4:27

    oh thanks anyway fedmich….

  • first dandy wrote on 9 July, 2008, 5:32

    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 wrote on 10 July, 2008, 4:59

    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 wrote on 22 August, 2008, 10:44

    Thanks helped a lot.

  • ecards wrote on 12 October, 2008, 21:15

    It’s really cool to have this script, thank you.

    It does seem though that there should be an easier way to do this in jquery because it’s so common.

    For example in most desktop development environments you toggle an option and get this feature.

    Yes, I know JQuery and related script has to remain super light, but still…

    Thanks!

  • Moksha Solutions wrote on 29 January, 2009, 13:18

    Thanks was looking for something like this.

  • Adem wrote on 29 March, 2009, 13:33

    Hello,
    Very nice code, thank you.
    Two questions will be.
    How we will use multi-input?
    Example:
    Input1: errmsg1:
    Input2: errmsg2:
    Input3: errmsg3:
    Input4: errmsg4:

    AND
    Requirement to start with zero?
    Example: 0123, 056784, 045674, 09876, such as.

    I am beginner, please try the code I would like

    Thanks

  • nishit wrote on 31 March, 2009, 5:27

    thank u rohan …i m liking for this validation from long time ……thankyou again

  • Mani wrote on 7 April, 2009, 12:35

    Thanks ur support
    not supporting server control

  • d wrote on 20 April, 2009, 19:47

    This script only works for numbers at the top of your keyboard. NumPad numbers wont work.

  • Charlie Elliott wrote on 9 May, 2009, 17:03

    Any help on checking multiple textboxes with only one function?

  • Waqas wrote on 31 May, 2009, 10:58

    Dear Roshan
    I have just copied n pasted to ma test page. but it is not working for me. Can you please help me. I m new to web development.
    it looked very nice. but not working for me. dont know…

    i included the js file.
    i my aspx page.

    copied ur html code i.e

    n wrote the javascript like

    $(“#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.which57))
    {
    //display error message
    $(“#errmsg”).html(“Digits Only”).show().fadeOut(“slow”);
    return false;
    }
    });

    i just copied your code.
    But it is not working..what should i do???
    please help if you can

  • Shachindra Pandey wrote on 2 July, 2009, 8:34

    Hey it is really fantastic code.I am using this concept in my work.
    Really an amazing experience.wonderfull thanks buddy thank you very much.

    sachindra Pandey

  • Nate wrote on 7 October, 2009, 20:37

    Has this been tested in all the major browsers? How does this compare the the numeric jquery plugin?

  • zeally wrote on 27 November, 2009, 10:54

    Thank you, it’s work.

  • ali wrote on 15 January, 2010, 6:04

    This is great code.. great work man!!!!… but there are still some problems ..
    1. You can paste text by right click on the text box and paste .
    2. Please generalize code by passing ID of the control as parameter.
    Regards,
    Ali Raza

  • mj wrote on 27 February, 2010, 6:16

    Hello,

    How can i change the code to accept alphabets and space only?

    thanks.

  • dm777 wrote on 2 May, 2010, 16:24

    Very nice script.

    How to I allow it to accept period, decimal characters both . or ,

    Thanks

  • Alex Lam wrote on 7 June, 2010, 4:54

    hello everybody, i just do like Waqas, but it do not work. I don’t know the error it is. Can you please explain “keypress(function (e)”. What is “e”? Thanks so much.

  • dinesh wrote on 29 July, 2010, 4:54

    Hi Roshan your code really superb. Is any code to accept the numbers with dot ( I mean float number) If there means please help me.
    Thankyou

  • jumpjack wrote on 13 February, 2011, 11:49

    How can I prevent user IN ADVANCE from inserting characters other than numbers? For mobile devices users it would be much more comfortable if the only input possibile is numeric, as they must press each button 3 or 4 times to get a number rather than a letter!
    I tried adding TYPE=”TEL” or format=”*N” in the input field, but it does not work.

  • MHD wrote on 26 June, 2011, 8:57

    Thank you very match .. it’s help me.

  • Garment wrote on 2 February, 2012, 3:02

    Thanks for given me a good guide about it, it has helped me a lot.

  • syed mohammed ahmed wrote on 10 March, 2012, 17:11

    HOPE THIS HELP
    http://workwithphp.info/?p=77

Trackbacks

  1. PHP Coding School » Blog Archive » php tips [2008-04-16 18:09:41]
  2. Help PHP form, Input type for Mobile Number. - TechEnclave
  3. Help PHP form, Input type for Mobile Number. - TechEnclave
  4. pligg.com
  5. jQuery price validator plugin · Ariy Technology

Write a Comment

 


Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.