Auto Tab To Next Input Field When Fill 4 Characters

June 27, 2023 Post a Comment

What I am trying to do is, point to next tab when filling four characters. Each field should have 4 characters and once it is completed it should move to next input box. $('.input

Solution 1:

Your code works fine, however your input elements are set as type="number". Non-numeric content is ignored, so if you enter "abcd", for example, the input's value is empty (meaning a length of 0). If you enter "1234" on the other hand, the input's value is 1234.

If you want your code to fire when non-numeric content is entered, simply change each input's type to text.

<inputclass="inputs"type="text" maxlength="4" />

JSFiddle demo.

Note that I've also removed the duplicate class attribute from each of your elements in that example, too.

As krish has mentioned in the comments on your question, there is an issue with your code in that the last input element will continue to accept more than 4 characters. To fix this, put a check in place to ensure that there is a next('.inputs') element:

if (this.value.length == this.maxLength) {
  var $next = $(this).next('.inputs');
  if ($next.length)
      $(this).next('.inputs').focus();
  else
      $(this).blur();
}

JSFiddle demo.

Solution 2:

Perhaps you neglected to enclose your code in DOM ready. Jsfiddle encloses your code in $(window).load(function() { .....}) and that's why it's working. So on your own page use:

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

In the jsfiddle you can confirm that by selecting No wrap - in <head> and then click run. The code will not work. But if you use the above which is enclosed in DOM ready, it works.

Solution 3:

<html><head><scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script><Script>
        $(document).ready(function(){
            $(".inputs").keyup(function () {
                $this=$(this);
                if ($this.val().length >=$this.data("maxlength")) {
                  if($this.val().length>$this.data("maxlength")){
                    $this.val($this.val().substring(0,4));
                  }
                  $this.next(".inputs").focus();
                }
             });
        });
    </Script></head><body><inputtype="text"class="inputs"data-maxlength="4"><inputtype="text"class="inputs"data-maxlength="4"><inputtype="text"class="inputs"data-maxlength="4"><inputtype="text"class="inputs"data-maxlength="4"></body>

Solution 4:

Here is a improved Version for all who need this for some kind of splitted Informations like a serial key or something like that:

$(document).ready(function(){
    $(".amazonInput").keydown(function (e) {
        var code = e.which;
        $this=$(this);
        if ($this.val().length >=$this.data("maxlength") && code != 8) {
            if($this.val().length>$this.data("maxlength")){
                $this.val($this.val().substring(0,4));
            }
            $this.next(".amazonInput").focus();
        }
        if($this.val().length == 0 && code == 8) {
            $this.prev(".amazonInput").focus();
        }
    });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Solution 5:

My first issue with this has been that if tabbing through fields that are already filled, you have to select each field manually. I suggest this:

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

The second issue's solution escapes me. Basically, in the same situation of having fields previously filled, if you type too quickly the events will fire as such: KeyDown KeyDown KeyUp KeyUp

What this causes, is to skip the next input.

Html5 stackoverflow Examples