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
– Petteri H, Commented Jul 22, 2011 at 11:14

MAK Ripon · Accepted Answer · 2011-07-22 11:16:03Z

2

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.

answered Jul 22, 2011 at 11:16

MAK Ripon

1,0914 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pankouri Over a year ago

I put all the textboxes in a div, and at the div I called the class and it worked.

jakub.g · Accepted Answer · 2011-09-13 22:23:55Z

1

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.

answered Sep 13, 2011 at 22:23

jakub.g

41.9k12 gold badges101 silver badges142 bronze badges

Comments

Benjamin Crouzier · Accepted Answer · 2011-09-13 21:20:58Z

0

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/

answered Sep 13, 2011 at 21:20

Benjamin Crouzier

42.2k48 gold badges179 silver badges240 bronze badges

Comments

Nicola Peluchetti · Accepted Answer · 2011-07-22 12:20:48Z

-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, 2011 at 12:20

answered Jul 22, 2011 at 11:15

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

3 Comments

Pankouri Over a year ago

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

Nicola Peluchetti Over a year ago

Here is a working fiddle, there were two small errors - copy/paste the code again jsfiddle.net/a5BJX

Pankouri Over a year ago

I am putting a new question, please ans this over there, this part is getting too messi

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related