CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Prasanga
Prasanga

Reputation: 1038

Auto tab to next input field when fill 4 characters

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.

Upvotes: 29

Views: 99478

Answers (8)

Phaelax z
Phaelax z

Reputation: 1999

This builds upon James Donnelly's answer. While you can click a previously filled field without problem, I noticed this method prevents the user from manually tabbing backwards using the keyboard (SHIFT + TAB on windows). To correct this, I added an additional check comparing the field's value with the current selection (which was also added in). This way, if the user needs to go back or wants to start over and re-enter data, the field automatically selects the text and can more easily be overwritten without having to manually delete the characters first. And keyboard navigation will still work.

    $(".inputs").keyup(function () {
        if (this.value.length == this.maxLength && window.getSelection().toString() != this.value) {
          var $next = $(this).next('.inputs');
          if ($next.length)
              $(this).next('.inputs').focus();
          else
              $(this).blur();
        }
    });
    
    $(".inputs").focus(function(){
        $(this).select();
    });

Upvotes: 0

ja0
ja0

Reputation: 83

I found that code working perfectly in a honCode script that has multi input boxes for the serial number.

Pure JS:

function onchechnge(i){
    var dom = document.getElementById("key"+i);
    var ml = dom.maxLength;
    var lg = dom.value.length;
    if (lg >= ml) {
        document.getElementById("key"+(i+1)).focus()
    }
}

HTML:

<fieldset id=serialkey>
    <input name=key1 id=key1 onkeypress="onchechnge(1)" type=text size=3 maxlength=5> 
    <input name=key2 id=key2 onkeypress="onchechnge(2)" type=text size=3 maxlength=5>
    <input name=key3 id=key3 onkeypress="onchechnge(3)" type=text size=3 maxlength=5>
    <input name=key4 id=key4 onkeypress="onchechnge(4)" type=text size=3 maxlength=5> 
    <input name=key5 id=key5 type=text size=3 maxlength=5>
</fieldset>

Upvotes: 1

Developer
Developer

Reputation: 99

For those Who Have tried the Accepted Answer, but Couldn't find solution like me

In your Layout Page or page header, just input ajax library link (Shown in below)

It worked on me, Hope It will help you as well.

$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      var $next = $(this).next('.inputs');
      if ($next.length)
          $(this).next('.inputs').focus();
      else
          $(this).blur();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<input class="inputs" type="text" maxlength="4" style="font-size:10px" />
<input class="inputs" type="text" maxlength="4" style="font-size:10px" />
<input class="inputs" type="text" maxlength="4"  style="font-size:10px" />


</body>

Upvotes: 0

T.Schultz
T.Schultz

Reputation: 1

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.

Upvotes: 0

Max Kern
Max Kern

Reputation: 1

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();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Mark Smit
Mark Smit

Reputation: 574

<html>
<head>
    <script src="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>
    <input type="text" class="inputs" data-maxlength="4">
    <input type="text" class="inputs" data-maxlength="4">
    <input type="text" class="inputs" data-maxlength="4">
    <input type="text" class="inputs" data-maxlength="4">
</body>

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128801

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.

Upvotes: 40

PeterKA
PeterKA

Reputation: 24638

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.

Upvotes: 1

Related Questions