Automatically Move Cursor from One Textbox to Another

Question

I am making a Web application that validates passkeys and displays some values there are four passkeys for a file to be entered Validate it, I am entering the passkeys just

Answer 1

You can do pure javascript like this:

<script type="text/javascript">
function ValidatePassKey(tb) {
  if (tb.TextLength >= 4)
    document.getElementById(tb.id + 1).focus();
  }
}
</script>

<input id="1" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="2" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="3" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="4" type="text" maxlength="4">

Answer 2

You can use JavaScript's Onchange Event (or JQuery may be) on the Textbox which calls a method, where You can check the value of the Textbox if it equals the Maximum value , then setFocus on the next Textbox.

Answer 3

In my present application I have enter one Passkey then have to press Tab or using the Mouse I have to select the Next Textbox to enter next Passkey

Don't do that. Just use the Control.Focus() method.

When in HTML, you can use jQuery's focus():

$("#textbox").focus();

Answer 4

Use the TextBox.Focus() method on the next TextBox. Use the first TextBox's TextBox.TextChanged event to test if focus should be changed and to call the Focus method on the next TextBox.

Answer 5

<script type="text/javascript">
$(document).ready(function(){
$("#1").keyup(function(){
    var text_lenght = $('#1').val().length;
    if (text_lenght == 3) {
        $('#2').focus();
    }
});

$("#2").keyup(function(){
    var text_lenght = $('#2').val().length;
    if (text_lenght == 3) {
        $('#3').focus();
    }
});

});
</script>

<input id="1" type="text" class="form-control" name="phone1" maxlength="3" >
<input id="2" type="text" class="form-control" name="phone2" maxlength="3" >
<input id="3" type="text" class="form-control" name="phone3" maxlength="4">

Answer 6

you can create a directive also to get the position move

<a href="https://plnkr.co/edit/G6sFMM9vaR6nQfVaMI2E?p=preview">directive 1</a>

<a href="https://plnkr.co/edit/G32KUITspNp1qsq6gleI?p=preview">directive 2</a>