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();
});

此外，键入不是keydown或它会很快改变。

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();
    }
});

Answer 4

搜索和开发之后，我最终得到了一个交叉浏览器片段，它可以根据maxlength（用1个字符测试）聚焦下一个具有相同类的输入字段，并且能够通过退格按钮进行聚焦：

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 5

这是我用来使输入键表现为标签的代码，即按下Enter键时聚焦到下一个元素或按shift + Enter时聚焦前一个元素。

1）基本上：

tabables = $("*[tabindex != '-1']:visible");
var index = tabables.index(element);
tabables.eq(index + 1).focus();

2）在这里，你是一个封装行为的“类”，考虑到向前和向后以及有效的可聚焦元素。

我希望它有所帮助，如果某些代码符合您的需求，请随时适应您的需求：）

EnterAsTab = function () {
    this.ENTER_KEY = 13;
};

EnterAsTab.prototype.init = function () {
    this.listenOnEnterKey();
};

EnterAsTab.prototype.listenOnEnterKey = function () {

    var me = this;
    $('form input').on('keypress', function (event) {

            if (event.which === me.ENTER_KEY) {

                if (!event.shiftKey)
                    me.findNextFocusableElement(this);
                else
                    me.findPreviousFocusableElement(this);

                event.preventDefault();
            }
        }
    );
};

EnterAsTab.prototype.findNextFocusableElement = function (element) {
    this.findFocusableElement(element, this.increaseIndex);
};

EnterAsTab.prototype.findPreviousFocusableElement = function (element) {
    this.findFocusableElement(element, this.decreaseIndex);
};

EnterAsTab.prototype.findFocusableElement = function (element, callable) {

    var tabables = $("*[tabindex != '-1']:visible");
    var index = tabables.index(element);
    var counter = 1;
    var nextElement = undefined;

    try {

        while (true) {

            if ((nextElement = tabables.eq(index + counter)).length === 0) {
                break;
            }

            if (this.isFocusableElement(nextElement)) {

                var newIndex = callable.call(this, index, counter);
                tabables.eq(newIndex).focus();

                break;
            } else {
                counter++;
            }
        }
    } catch (error) {
        console.log(error);
    }

};

EnterAsTab.prototype.increaseIndex = function (index, counter) {
    return (index + counter);
};

EnterAsTab.prototype.decreaseIndex = function (index, counter) {
    return index - counter;
};

EnterAsTab.prototype.isFocusableElement = function (element) {

    return ['SELECT', 'TEXTAREA'].indexOf(element.prop('tagName')) > -1 ||
        element.is(':text') ||
        element.is(':checkbox') ||
        element.is(':radio');
};

var enterAsTab = new EnterAsTab();
enterAsTab.init();

Answer 6

如果您只想查看下一个输入，但是您已经像这样说了分隔符

<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">

您需要使用此代码来获取所有下一个项目并确定找到的第一个输入：

$('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 7

使用keyup例如

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

在行动http://jsfiddle.net/qygB2/

中查看

Answer 8

如果您使用的是最新的jQuery版本，我强烈建议您使用on方法。如果你转到jQuery源代码，你会注意到所有其他事件方法现在都重定向到这个方法，所以为什么不直接使用它：

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

Answer 9

在使用next而不命名类或id之后，这将继续关注文本框。

 $(this).hide();        
 $(this).next().show();
 $('input[type=text]').focus();

Answer 10

以@ Vega的回答为基础

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;
    }
});

如果用户点击已有值的输入，它将覆盖它，而不是转到下一个输入，它也只会关注文本输入。我有一种情况，我在文本输入旁边有一个提交输入，如果使用退格可能会意外地重定向页面。

Answer 11

这是满足您所有需求的代码。

get_time= new Date(new Date(get_time.replace(' ','T')+'Z').getTime()).setMinutes(new Date(new Date(get_time.replace(' ','T')+'Z').getTime()).getMinutes() + new Date(new Date(get_time.replace(' ','T')+'Z').getTime()).getTimezoneOffset());

}）;

Answer 12

这很完美它还检查中间输入是否已填充

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

    if (this.value.length == this.maxLength) {
    var n=$(this).next('.inputs');
    n.focus();
   if(n.val().length==n.prop('maxlength')) n.next('.inputs').focus(); 
    }

});

专注于下一个输入（jquery）

12 个答案: