Max Length For Input Type Number in Jquery

Why Do We Need a Maximum Length for Number Fields

There are many cases and scenarios where we may want the user to enter a number/string of particular length, like let's say we have a text box for mobile number where we may want only 10 digits(for Indian mobile no.), let's say we have a pin code field where we may want user to enter just 4 digits(for Indian pin code) and not more than that

In that case we need to restrict the length of the text box or the input field to a particular value.

Enter any number here :
* This will allow only 3 digits in this text box.

Lets See How to Restrict the Length of a Text box in Jquery

In this article we will see the below things.
  • Restrict the length of the text box to a specific value, let's say 3.
  • Allow the user to enter only numbers in the text box.
  • Delete the number using back space, delete key and selecting the text box value.
Above are the tasks we are going to do through Jquery.

Lets take an textbox/input field.
<input id="txtTotalPlayers" />
Ok, Hers is the scripts which will do the trick for us.
<script type="text/javascript">
         // Bind a keypress event to the textbox.
         $(document).ready(function () { 
             $('#txtTotalPlayers').bind("keypress", function (e) {
                 if (!isNumber(e, this)) {
                     return false
                 }
             });
         });
         
         // This function checks if the text inside the textbox is selected or not.
         function isTextSelected(input) {
             if (typeof input.selectionStart == "number") {
                 return input.selectionStart == 0 && input.selectionEnd == input.value.length;
             } else if (typeof document.selection != "undefined") {
                 input.focus();
                 return document.selection.createRange().text == input.value;
             }
         }
         
         // This method decided if key pressed has a numeric value or not
         function isNumber(e, t) {
             e = e ? e : window.event;
             var n = e.which ? e.which : e.keyCode;
             var r = false;
             var value = e.key;
             if (n >= 48 && n <= 57 || n == 8 || n == 46) {
                 if ($(t).val().length == 3) {
                     if (isTextSelected(document.getElementById('txtTotalPlayers'))) {
                         $(t).val(value);
                     }
                     r = false
                 } else {
                     r = true
                 }
                 if (n == 8 || n == 46)
                     r = true
             }
             else {
                 r = false
             }
             return r
         }
    </script> 
In the above script I am doing 4 things.
  1. Bind the textbox with a keypress event, so that each time user hits a key that event will be fired.
  2. Check the pressed key and decide if its a number or not from the key code.
  3. Check if the Delete, Back Space keys are being pressed or not.
  4. Check the length of the value that text box is holding.
 * The key codes for the numbers are 48-57 and for back space and delete are 8 and 46 respectively.

Happy Coding...

No comments:

Post a Comment