Auto Tab to Next Input Field When Fill 4 Characters

Auto tab to next input field when fill 4 characters

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.

Auto Tab to the next input field when 1 character is filled with an input field disabled

Use nextAll() method(next() method can't use since it only selects immediate adjucent sibling) with :enabled(to get only enabled inputs) and :first(to get first or nearest one among them) pseudo-class selectors.

$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).nextAll('.inputs:enabled:first').focus();
}
});

$(".inputs").keyup(function() {  if (this.value.length == this.maxLength) {    $(this).nextAll('.inputs:enabled:first').focus();  }});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input class="inputs" type="text" maxlength="1" /><input class="inputs" type="text" maxlength="1" /><input class="inputs" type="text" maxlength="1" disabled="disabled" /><input class="inputs" type="text" maxlength="1" /><input class="inputs" type="text" maxlength="1" disabled="disabled" /><input class="inputs" type="text" maxlength="1" />

After fill 4 number auto tab to next input field

Try 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( num2 >= 4){
$("#num3").focus();
if( num3 >= 4){
$("#num4").focus();
if (num4>=4){
$("#num4").val($("#num4").val().substr(0,3));
}
}

}
}
}

});
})();

how to move next input tab after fill 4 characters

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

Auto tab to next input field once two numbers have been entered

.next() only looks within siblings. In your case the field is inside the parent's sibling so you'd have to get the parent's next sibling to find the next input.

On a side note, you might want to skip certain key codes (e.g. arrow keys) in the keyup event.

Example:

$(".en__field__input.en__field__input--tripletext").keyup(function() {  if (this.value.length == this.maxLength) {
$(this) .blur() .parent() .next() .children('.en__field__input.en__field__input--tripletext') .focus(); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="en__field__element en__field__element--tripletext">  <div class="en__field__item">    <input id="en__field_supporter_NOT_TAGGED_11" type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2">  </div>  <div class="en__field__item">    <input type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2">  </div>  <div class="en__field__item">    <input type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2">  </div></div>

Moving to next input automatically

You can iterate through elements of the same class name and detect two different events.

var elts = document.getElementsByClassName('test')Array.from(elts).forEach(function(elt){  elt.addEventListener("keyup", function(event) {    // Number 13 is the "Enter" key on the keyboard    if (event.keyCode === 13 || elt.value.length == 3) {      // Focus on the next sibling      elt.nextElementSibling.focus()    }  });})
<input type="text" class="test" id="0" maxlength="3"/><input type="text" class="test" id="1" maxlength="3"/><input type="text" class="test" id="2" maxlength="3"/><input type="text" class="test" id="3" maxlength="3"/>

Focus next input once reaching maxlength value

No jQuery used and is a very clean implementation:

  • Reads from the maxlength attribute.
  • Scales to any number of inputs inside of your container.
  • Automatically finds the next input to focus.
  • No jQuery.

http://jsfiddle.net/4m5fg/5/

<div class="container">
a: <input type="text" maxlength="5" />
b: <input type="text" maxlength="5" />
c: <input type="text" maxlength="5" />
</div>

..

var container = document.getElementsByClassName("container")[0];
container.onkeyup = function(e) {
var target = e.srcElement || e.target;
var maxLength = parseInt(target.attributes["maxlength"].value, 10);
var myLength = target.value.length;
if (myLength >= maxLength) {
var next = target;
while (next = next.nextElementSibling) {
if (next == null)
break;
if (next.tagName.toLowerCase() === "input") {
next.focus();
break;
}
}
}
// Move to previous field if empty (user pressed backspace)
else if (myLength === 0) {
var previous = target;
while (previous = previous.previousElementSibling) {
if (previous == null)
break;
if (previous.tagName.toLowerCase() === "input") {
previous.focus();
break;
}
}
}
}

Auto tab to next blank text input box

This should do the trick:

$("input").on("input", function () {
var $this = $(this);
if ($this.val().length >= parseInt($this.attr("maxlength"), 10)) {
var nextEmpty = $this.nextAll("input[value=''], input:not([value])")[0];
if (nextEmpty) {
nextEmpty.focus();
}
}
});

It will find the first input sibling with an empty value attribute, or no value attribute at all. If such a sibling is found, it will get focus.

http://jsfiddle.net/4m5fg/149/

Note that I removed the setTimeout function as it seems to be of no use with a timeout of 0...

Move input focus to next input when maxLength is reached - Angular 4 / Typescript

Use a different approach. Angular does not select elements and read attributes from the existing DOM, as jQuery does, because Angular generates the DOM from data. So it's difficult, if possible at all, to read the input's maxlength attribute, and anyway it would be clumsy an "non-Angulary".

Instead, use a different approach and pass the maxLength in the keyup function :

<input type="text" (keyup)="keytab($event, 2)" />
<input type="text" (keyup)="keytab($event, 4)" />

keytab(event, maxLength){
console.log(maxlength); // 2 or 4
// .......
}


Related Topics



Leave a reply



Submit