how to move next input tab after fill 4 characters

Question

I have another question, i have filled all fields if i need to change number second or third field. changes can not be done and it goes last input field.

I have tried below code,

    (function (){
$("#num1, #num2, #num3, #num4").on("keyup", function (t) {
    //add the key's you want to accept such as backspace or arrow keys etc.
    if (t.keyCode != 13 && t.keyCode != 8 && t.keyCode != 37 && t.keyCode != 38 && t.keyCode != 39 && t.button != 1 && t.button != 2 && t.button != 3) {
    var maxlength = 4;
    var num1 = $("#num1").val().length;
    var num2 = $("#num2").val().length;
    var num3 = $("#num3").val().length;
    var num4 = $("#num4").val().length;
    $(this).val($(this).val().replace(/[^0-9\.]/g,''));

    if ( num1 >= 4) {
    $("#num2").focus();
    }
    if( num2 >= 4){
      $("#num3").focus();
    }
    if( num3 >= 4){
      $("#num4").focus();
    }

    if (num4>=4){
       $("#num4").val($("#num4").val().substr(0,4));
    }
    }

  });   
})();

check this link , it is already answered here , It may help you http://stackoverflow.com/questions/10539113/focusing-on-next-input-jquery — J.Rob, May 27 '14 at 05:44
What is the problem with the code you have? Your demo is not the same as the posted code. — Mathias, May 27 '14 at 05:51
I filled all input fields with 4 character then if i need to change second field or third field, pointer goes to last field. — Prasanga, May 27 '14 at 05:55

score 2 · Accepted Answer · answered May 27 '14 at 05:58

The code you have pasted has wrong if statement. Lets try to understand the problem. Following is how your code works

Input value in first field. Reach four characters go to next. Input in second field. Reach four characters go to next. Input in third field. Reach four characters go to next. Input in fourth field. Reach four characters stop.

Now the problem is when you start editing. When you edit second line. Your if command at the same time is telling to check third and fourth line. So if third line has four characters go to fourth. And if fourth line has four characters stop. Hence you aren't able to edit second line unless you delete whatever is written in third line and fourth line.

The below link shared by Bhavesh does exactly what you want. Increase max limit to 4 as desired. But I hope you are able to understand where the problem is so you don't make similar mistake in the future.

$(".inputs").keyup(function () {
  if (this.value.length == this.maxLength) {
    $(this).next('.inputs').focus();
  }
});

JSFIDDLE LINK

Why you are making number – Shameel Kadannamanna May 27 '14 at 12:26 — Shameel Kadannamanna, May 27 '14 at 12:26
where does it say type=numbers? – Saad Bashir May 27 '14 at 18:41 — Saad Bashir, May 27 '14 at 18:41

score 2 · Answer 2 · answered May 27 '14 at 06:00

I was busy,, But I Solved your Problem with an easy way..

Change your Jquery to this

(function (){
$("#num1, #num2, #num3, #num4").on("keydown", function (t) {
    //add the key's you want to accept such as backspace or arrow keys etc.
    if (t.keyCode != 13 && t.keyCode != 8 && t.keyCode != 37 && t.keyCode != 38 && t.keyCode != 39 && t.button != 1 && t.button != 2 && t.button != 3) {
    var maxlength = 4;
    var num1 = $("#num1").val().length;
    var num2 = $("#num2").val().length;
    var num3 = $("#num3").val().length;
    var num4 = $("#num4").val().length;
    $(this).val($(this).val().replace(/[^0-9\.]/g,''));

    if (num1 >= 4) {
    $("#num2").focus();
    }
    if(num1 >= 4 && num2 >= 4){
      $("#num3").focus();
    }
    if((num1 >= 4 && num2 >= 4) && num3 >= 4){
      $("#num4").focus();
    }

    if ((num1 >= 4 && num2) && (num3 >= 4 && num4)){
            $("#num4").val($("#num4").val().substr(0,3));
    }
    }

  });   
})();

http://jsfiddle.net/j42Jx/9/

thanks and it has one issue if i start entering value since second field can enter more than four characters. how to resolve this? — Prasanga, May 27 '14 at 09:58

how to move next input tab after fill 4 characters

2 Answers2

Linked