focusing on next input (jquery)

Question

I\'ve got four inputs that each take one number. What I want to do is set the focus automatically to the next input once the number has been set. They all have the class \"i

Answer 1

That will just get the next element, whatever it is. You probably want:

$(".inputs").keyup(function () {
  $(this).next(".inputs").focus();
});

Also, key up not keydown or it will change too soon.

Answer 2

Use keyup e.g.

$(".inputs").keyup(function () {
    $(this).next().focus();
});​

See it in action http://jsfiddle.net/qygB2/

Answer 3

After searching and developing I end up in a crossbrowser snippet which makes it possible to focus the next input field with same class depending on maxlength (tested with 1 character) also with the ability to focus back via backspace button:

Javascript (jquery):

var codeCharInput = 'input.code-char';
$(codeCharInput+':first').focus();
$(codeCharInput).keyup(function(e) {
  if ((e.which == 8 || e.which == 46)) {
    $(this).prev(codeCharInput).focus().val($(this).prev().val());
  } else {
    if (this.value.length == this.maxLength) {
      $(this).next(codeCharInput).focus();
    }
  }
});

HTML:

<input type="text" name="chars[]" maxlength="1" class="code-char" />
<input type="text" name="chars[]" maxlength="1" class="code-char" />
<input type="text" name="chars[]" maxlength="1" class="code-char" />
<input type="text" name="chars[]" maxlength="1" class="code-char" />

Answer 4

If you just want to look at the next input but you have say separators in the way like this

<input type="number" pattern="[0-9]*" inputmode="numeric" maxlength="2" placeholder="DD" name="dobday" id="dobday">
<div class="separator">/</div>
<input type="number" pattern="[0-9]*" inputmode="numeric" maxlength="2" placeholder="MM" name="dobmonth" id="dobmonth">
<div class="separator">/</div>
<input type="number" pattern="[0-9]*" inputmode="numeric" maxlength="4" placeholder="YYYY" name="dobyear" id="dobyear">

You will need to you the this code to get all the next items and settle on the first input found:

$('input#dobday,input#dobmonth,input#dobyear').on('input', function(e) {
    if (jQuery(this).val().length >= parseInt(jQuery(this).attr("maxlength"), 10)) {
            if (jQuery(this).attr('id') === 'dobyear') {
                jQuery(this).blur();
            } else {
                jQuery(this).nextAll('input:first').focus();
            }
    }
}

Answer 5

Building on @Vega's answer

inputs.keydown(function(e) {
    var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

    $(this).val('');

    if (e.which == 8 && this.value.length == 0) {
        $(this).prev(inputs).focus();
    } else if ($.inArray(e.which, keys) >= 0) {
        return true;
    } else if (this.value.length > charLimit) {
        $(this).next(inputs).focus();
        return false;
    } else if (e.shiftKey || e.which <= 48 || e.which >= 58) {
        return false;
    }
}).keyup (function () {
    if (this.value.length >= charLimit && $(this).next(inputs).attr('type') === 'text') {
        $(this).next(inputs).focus();
        return false;
    }
});

If a user clicks on an input that already has a value it will override it, instead of going to the next input, it will also only focus on text inputs. I had a situation where I had a submit input next to the text inputs and if using backspace could accidentally redirect the page.

Answer 6

If you're using the latest jQuery version, I strongly recommend you to use the on method. If you go to the jQuery source code, you'll notice that all the other event methods now redirect to this method, so why don't use it directly:

$(document).ready(function () {
        $('.inputs').on('keyup', function(){
            $(this).next().focus();
        })
});