jquery - 专注于下一个输入(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