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.
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
|
|
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 Email
|
|||
11 comments :
Thanks but how can be avoid entering non-numeric characters at the time of page load
during page load the textbox allows entering non numeric values...this can lead to bugs...
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
Thanks, your articles are good. but some are not working when the controls are placed in content placeholder.
how to stop user to insert 0 (zero) as First Character in text box
For the content placeholder specify ContentPlaceHolder1_TabContainer1_TabPanelCountry_TxtCode etc
its not working...dear
This code is working fine but i want to paste numeric value onlym how it is possible
This JS Function is not working on mobile phones. Even I tried many methods for the same but all fails.
Copy and paste the letters using mouse is allowing in the textbox.
Note: Only a member of this blog may post a comment.