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

11 comments :

Anonymous 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

Unknown 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

Unknown said...

For the content placeholder specify ContentPlaceHolder1_TabContainer1_TabPanelCountry_TxtCode etc

Anonymous said...

its not working...dear

Unknown said...

This code is working fine but i want to paste numeric value onlym how it is possible

Unknown said...

This JS Function is not working on mobile phones. Even I tried many methods for the same but all fails.

Anonymous said...

Copy and paste the letters using mouse is allowing in the textbox.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 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.