How can I restrict number of character input in a field with javascript or jquery?

Question

I wrote a validation code for an input text field, which will take only numbers and some control keys. I took the help from stackoverclow :), So I am here again to take the help. My validation code is

 $("#txtLevel1Year").keydown(function(event)
            {
                // Allow only backspace,delete,left arrow,right arraow and Tab
                if ( event.keyCode == 46 
                    || event.keyCode == 8 
                    || event.keyCode == 37 
                    || event.keyCode == 39 
                    || event.keyCode == 9)
                    {
                    // let it happen, don't do anything
                    }
                    else {
                        // Ensure that it is a number and stop the keypress
                        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode <96 ||event.keyCode > 105) ) {
                            event.preventDefault(); 
                        }   
                    }
            });

Now let me tell you what I am looking for, first, I want to restrict this field to take exactly 4 digits.not less not more, the second one is about optimization. The text field(s) where I want this validation to work is(are)

<asp:TextBox runat="server" ID="txtLevel1Year" Width="50px" TabIndex="13"></asp:TextBox>  
                        <asp:TextBox runat="server" ID="txtLevel2Year" Width="50px" TabIndex="17"></asp:TextBox>  
                        <asp:TextBox runat="server" ID="txtLevel3Year" Width="50px" TabIndex="21"></asp:TextBox>  
                        <asp:TextBox runat="server" ID="txtLevel4Year" Width="50px" TabIndex="25"></asp:TextBox>

Here I can repeat the the validation code 4 times to make this work by grabing four different ids though the validation is exactly same. Can I do anything which can remove this repeatation? If My problem isw not clear to you, please let me know. thanx all of you in advance. This is the edited part of this question I have achieved the goal of optimazation by creatinf a CSS class and call it in the div where I place all the year text boxes. But My limit to make it exactly 4 digits yet to be solved. please help me.

With validation like that remember to test the field also with copy&paste - both using keyboard short cut and mouse right click. — Petteri H, Jul 22 '11 at 11:14
http://stackoverflow.com/questions/686995/jquery-catch-paste-input — Petteri H, Jul 22 '11 at 11:20

score 2 · Answer 1 · answered Jul 22 '11 at 11:16

I assume that your validation works. The trick will be to add a class for all textbox. Say the class name is

.validateTB

Then modify your script as follows

$(".validateTB").keydown(function(event)
        {
            // Allow only backspace,delete,left arrow,right arraow and Tab
            if ( event.keyCode == 46 
                || event.keyCode == 8 
                || event.keyCode == 37 
                || event.keyCode == 39 
                || event.keyCode == 9)
                {
                // let it happen, don't do anything
                }
                else {
                    // Ensure that it is a number and stop the keypress
                    if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode   <96 ||event.keyCode > 105) ) {
                        event.preventDefault(); 
                    }   
                }
        });

Note that only selector is changed in the script.

I put all the textboxes in a div, and at the div I called the class and it worked. — Pankouri, Jul 22 '11 at 11:31

score 1 · Answer 2 · answered Sep 13 '11 at 22:23

Remember that you can set <input maxlength="4"> in HTML as an easy solution to the half of the problem. However, this only prevents browser user from entering more than 4 characters, but you can avoid it programatically, by calling some JS function that sets longer value.

score 0 · Answer 3 · answered Sep 13 '11 at 21:20

Try this: (no blinking, and no copy paste allowed):

$(".validate").keyup(function(event) {
    var val = $(this).val();
    if (val.length > 5) {
        val = val.substring(0, 5);
        $(this).val(val);
        return false;
    }
}).keypress(function(event) {
    if ($(this).val().length > 4) {
        return false;
    }
});

http://jsfiddle.net/xEMzx/

Nicola Peluchetti · Accepted Answer · 2011-07-22T12:20:48.227

-1

Ok, first of to have your validation code to all the four fields you can use a class selector (after deining a calss for all your elements):

<asp:TextBox runat="server" class='validate'

 $(".validate").keydown(function(event)

to check for length you could use a keyup event (which in my experience is better for this task)

 $(".validate").keyup(function(event){
         var val = $(this).val();
         if (val.length > 4){
            alert ("Max length is 4");
            val = val.substring(0, val.length - 1);
            $(this).val(val);
            $(this).focus();
            return false;
          }
   });

fiddle here: http://jsfiddle.net/a5BJX/

edited Jul 22 '11 at 12:20

answered Jul 22 '11 at 11:15

Nicola Peluchetti

76,206
31
145
192

your last part is not working, I have made he modification like $(".validateYearTextBox").keydown(function(event) { //the same code }); and then pasted your code by replacing the appropiate class name. but its not working – Pankouri Jul 22 '11 at 11:44
Here is a working fiddle, there were two small errors - copy/paste the code again http://jsfiddle.net/a5BJX/ – Nicola Peluchetti Jul 22 '11 at 12:22
I am putting a new question, please ans this over there, this part is getting too messi – Pankouri Jul 22 '11 at 13:09

How can I restrict number of character input in a field with javascript or jquery?

4 Answers4