Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery - Allow Only Numbers (Numerics) in Textbox using JavaScript

Apr 22, 2013
Introduction

Here I will show how to use JQuery to allow only numbers in textbox or allow only numeric characters in textbox using JQuery.

Description:
  
In previous posts I explained jQuery Autocomplete textbox with images, jQuery lightbox slideshow, jQuery Create Rounded Corners Textbox, jQuery slideUp, slideDown and slideToggle Example, Password strength jquery plugin examples and many articles relating to JQuery, Asp.net. Now I will explain how to allow only numbers in textbox using JQuery.

To restrict user to enter only numbers in textbox we need to write the following code


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery allow only numbers or numeric characters in textbox</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#txtNumeric').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {
e.preventDefault();
}
}
});
});
</script>
</head>
<body>
<div>
<input type="text" id="txtNumeric" />
</div>
</body>
</html>
Live Demo

To check Live demo try to enter characters in below textbox



Enter Text:

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

7 comments :

idpkshr said...

Thanks but how can be avoid entering non-numeric characters at the time of page load

Anonymous said...

during page load the textbox allows entering non numeric values...this can lead to bugs...

Suresh Dasari said...

Actually it won't allow non numeric characters. In this blog jQuery plugin taking sometime to load onlines that's why it's allowing non numeric values during plugin load. If you add jquery plugin in your local folder it won't take much time to load and it won't allow non numeric characters. Still if you are not satisfied use JavaScript for that check this article http://www.aspdotnet-suresh.com/2010/12/how-to-restrict-user-to-enter-only.html

Amit Soni said...
This comment has been removed by the author.
Anonymous said...

Thanks, your articles are good. but some are not working when the controls are placed in content placeholder.

Anonymous said...

how to stop user to insert 0 (zero) as First Character in text box

vini katyal said...

For the content placeholder specify ContentPlaceHolder1_TabContainer1_TabPanelCountry_TxtCode etc

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.