How to create Numeric Textbox using JQuery

No.of Views5447
Bookmarked0 times
Downloads 
Votes0
By  RRaveen   On  21 Jan 2011 20:01:40
Tag : JQuery , Custom Controls
In this snippet I will show you how to create numeric textbox using JQuery.This snippet is allow to enter numbers,backspace keys only.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

In this snippet I will show you how to create numeric textbox using JQuery.This snippet is allow to enter numbers,backspace keys only.

Implementation

Create new web application with visual studio and add JQuery Library into page from Google CDN.

Html code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="numerictextboxdemo.aspx.cs"
Inherits="numerictextboxdemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to Create Numeric Textbox using JQuery</title>

    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">  
    </script>

   
</head>
<body>
    <form id="form1" runat="server">
   
    <div>
       
    </div>
    </form>
</body>
</html>

And then add a textbox within page rename to txtsalary and make page html as like below,

<form id="form1" runat="server">
    <div>
        <h2>
            The Numeric Textbox Live demo
        </h2>
    </div>
    <div>
        <asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>
    </div>
    </form>

Now write javascript to only allow numbers.

<script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $('#txtSalary').keydown(function(event) {
                if (((event.keyCode == 8 || event.keyCode == 46) || (event.keyCode >= 47 && event.keyCode < 58)) == false) {
                    event.preventDefault();
                }
            });
        });
    </script>

Note:If you are using Master page, you have to use the class to find the control than using IDs.

In above script,using keyDown event to textbox and check keycode each key down. If any keycode with in number range, backspace and period then allow to go down otherwise prevent default event of keydown.
The ASCII table for keys here

The more about event.preventDefault() here

Just press F5 and run application try to enter numbers or characters to textbox. 

Image Loading

Live Demo

Numeric TextBox live demo

Conclusion

In this snippet, I have demostrated to create numeric textbox using JQuery. Hopes help and thank you for reading.

 
Sign Up to vote for this article
 
About Author
 
RRaveen
Occupation-Software Engineer
Company-TGS
Member Type-Gold
Location-Singapore
Joined date-03 Jun 2009
Home Page-codegain.com
Blog Page-www.codegain.com
- B.Sc. degree in Computer Science. - 4+ years experience in Visual C#.net and VB.net - Obsessed in OOP style design and programming. - Designing and developing Network security tools. - Designing and developing a client/server application for sharing files among users in a way other than FTP protocol. - Designing and implementing GSM gateway applications and bulk messaging. - Windows Mobile and Symbian Programming - Having knowledge with ERP solutions
 
 
Other popularSectionarticles
    Here i am going to discuss about on how to clear the file upload control using jQuery. To clear file upload control, you have to place file upload control within the DIV tag like below.
    Published Date : 02/Nov/2010
    Here I am looking to explain how to call page methods using jQuery.
    Published Date : 16/Apr/2010
    In this snippet, I will show how to make all elements in array to UpperCase using JQuery. Recently I have published an article for display subcategories using JQuery AJAX with dropdown list, if you are aware of this, you can read here.
    Published Date : 03/Jan/2011
    In this snippet, I will explain how to disable button after clicked once using JQuery. In the web application we have use the many buttons to do some specific operations.But sometimes users click many times in same button, this is giving unexpected results. So this snippet gives solutions to disable once click button and prevent unexpected result.
    Published Date : 19/Jan/2011
Comments
By:DDate Of Posted:12/10/2012 2:48:37 AM
D
DDDDDDDDDDDDDDDW
By:merkelDate Of Posted:8/11/2011 9:26:56 AM
important
What a good blog I never thought I could get something good like this, actually I’ve increased my knowledge, actually I know my friends will be so happy with this when I sharing it with them.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top