Auto tab to next input field when fill 4 characters

Issue

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.

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

Fiddle.

Solution

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.

<input class="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.

Answered By - James Donnelly