Auto tab to next input field when fill 4 characters

Question

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.

Answer 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.

<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.