专注于下一个输入(jquery)

Question

我有四个输入,每个输入一个数字.我想要做的是在设置数字后自动将焦点设置为下一个输入.他们都有类"输入".

这不太奏效:

$(".inputs").keydown(function () {

            $(this).next().focus();
        });

Answer 1

我建议将maxlength设置为每个文本框1,并切换到下一个文本框,val.length并且maxlength相同.

DEMO

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

编辑:花了一些时间用于以下(未完全测试,但基本测试工作正常)

   1. Allowing just numeric chars  
   2. Allow some control like del, backspace, e.t.c
   3. Backspace on empty textbox will move to prev textbox
   4. charLimit var to dynamically decide how many char you want to restrict.

码:

$(function() {
    var charLimit = 1;
    $(".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];

        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').focus();
            return false;
        }
    });
});

DEMO

Answer 2

无论它是什么，都将得到下一个元素。您可能想要：

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

同样，按下键而不是按下键，否则更改太快。

Answer 3

尝试这个

jQuery.extend(jQuery.expr[':'], {
    focusable: function (el, index, selector) {
        return $(el).is('a, button, :input,[tabindex]');
    }
});
$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        // Get all focusable elements on the page
        var $canfocus = $(':focusable');
        var index = $canfocus.index(document.activeElement) + 1;
        if (index >= $canfocus.length) index = 0;
        $canfocus.eq(index).focus();
    }
});