Question

I have three Textboxes for Phones numbers. Textbox1 max length is 3 , 2nd's max length is 3 and 3rd max length is 4. When user types three digits in TextBox1 the cursor moves automatically to TextBox2 same thing happens with TextBox2 as well as TextBox3. I am handling this functionality in keyup event.

Issue is, when I press

Ctl + a

Ctl + c

Ctl + v

the cursor moves automatically to Textbox3 because Textbox reaches it’s Max Length and navigates it to next Textbox. I want to keep it on TextBox1. Any Ideas?

My code is below.

<asp:TextBox runat="server" ID="tbPh2" MaxLength="3" onkeyup="Mainautotab2(this, 0, event);"/>
<asp:TextBox runat="server" ID="tbPh22" MaxLength="3" onkeyup="Mainautotab2(this, 1, event);"/>
<asp:TextBox runat="server" ID="tbPh222" class="midium" MaxLength="4" />


function Mainautotab2(original, destination, evt) {
         if (document.getElementById('<%= tbPh2.ClientID%>').value.length == 3 && document.getElementById('<%= tbPh22.ClientID%>').value.length == 3) {

         if (destination == 0)
             document.getElementById("<%=tbPh22.ClientID %>").focus();
         if (destination == 1)
             document.getElementById("<%=tbPh222.ClientID %>").focus();
     }
}

Answer 1

I would recommend checking for the use of the control key being pressed, see this post for more information on how to do that. If you detect the CTRL key is pressed then do not move to the next textbox.

Alternatively, if you only want the “move to next” feature to work as the user is typing the 3rd character then perhaps something along the lines of checking the character count on keydown. Make sure that this new key press in the 3rd character and the previous keypress was the second character (i.e. store lastKeyPressCount somewhere)

---

As I am such a nice guy! here is some of my own work:

Html

<input type="text" id="1" maxlength="3" data-nextid="2"/>
<input type="text" id="2" maxlength="3" data-nextid="3"/>
<input type="text" id="3" maxlength="4"/>​

JavaScript (w/JQuery)

$("input").keyup(function(e){
    if(e.ctrlKey || e.which == 17 || e.which == 65 || e.which == 67 || e.which == 86){
        return;        
    }
    if($(this).val().length == $(this).attr("maxlength")){
        var nextid = $(this).data("nextid");
        if(nextid){
              $("#" + nextid).focus();       
        }
    }
});​

Keep in mind that this code has been specifically set to ignore the CTRL key in addition to the letters A, C and V.

See here for a working example