The article here has two examples and both the examples use jQuery Selectors to impose restriction on a group of input textboxes.
The first example uses jQuery .class Selector and the second example using jQuery .id Selector. It’s a very simple example.
Enter only Numbers using JavaScript
Using the “.class” Selector
Add the Google CDN for jQuery inside the <head> section of your Web page.
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head>
<!DOCTYPE html> <html> <head> <title>Enter only number using jQuery .class Selector</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <style> .groupOfTexbox { color:#000; font:11px/1.5 Arial, tahoma; padding:2px 4px; border:solid 1px #BFBFBF; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; } </style> </head> <body> <div> <p> <label style="font-style:italic;">Input boxes, which accepts only <strong>number</strong> and <strong>decimal</strong> values.</label> </p> <div> <h3>Group of Input boxes</h3> <input type="text" class="groupOfTexbox" /><br /> <input type="text" class="groupOfTexbox" /> </div> <p><label style="font-style:italic;">Input box, which accepts <strong>Alphanumeric</strong> values.</label></p> <p><input type="text" style="text-transform:uppercase;" /></p> </div> </body> <script> // jQuery ".Class" SELECTOR. $(document).ready(function() { $('.groupOfTexbox').keypress(function (event) { return isNumber(event, this) }); }); // THE SCRIPT THAT CHECKS IF THE KEY PRESSED IS A NUMERIC OR DECIMAL VALUE. function isNumber(evt, element) { var charCode = (evt.which) ? evt.which : event.keyCode if ( (charCode != 45 || $(element).val().indexOf('-') != -1) && // “-” CHECK MINUS, AND ONLY ONE. (charCode != 46 || $(element).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE. (charCode < 48 || charCode > 57)) return false; return true; } </script> </html>
Try this demo
Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes
Using the "#id" Selector
To restrict individual input boxes, we will use the jQuery “#id” Selector. This selector uses the ID of each input box or text box control.
<!DOCTYPE html> <html> <head> <title>Enter only number using jQuery .id Selector</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <p>jQuery .id Selector example. Enter only numbers and decimal values in the textbox!</p> <div> <asp:TextBox ID="tb1" Text="" Width="100px" runat="server"></asp:TextBox> <input type="text" id="tb2" /> </div> </body> <script> $(document).ready(function() { // MULTIPLE "ID's" ARE SEPARATED BY COMMAS. $("#tb1, #tb2").keypress(function(event){ return isNumber(event, this); }); }); // THE SCRIPT THAT CHECKS IF THE KEY PRESSED IS A NUMERIC OR DECIMAL VALUE. function isNumber(evt, element) { var charCode = (evt.which) ? evt.which : event.keyCode if ( (charCode != 45 || $(element).val().indexOf('-') != -1) && // “-” CHECK MINUS, AND ONLY ONE. (charCode != 46 || $(element).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE. (charCode < 48 || charCode > 57)) return false; return true; } </script>
The validation script or the function is the same for both the examples. However, in this examle, the funciton is called upon individual keypress() event of each input box.
Happy coding. ☺