聚焦于下一个输入 (jQuery)

Question

我有四个输入框，每个输入框都只能输入一个数字。我想做的是，在数字被设置后自动将焦点设置到下一个输入框上。它们都有"class=inputs"这个类。

但是下面的代码并没有完全达到我的要求：

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

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

- domino

---

请查看此帖子： - BinBin

查看更新的帖子以获取一些新功能...更像是autotab 演示。 - Selvakumar Arumugam

Answer 1

我建议将每个文本框的maxlength设置为1，并且一旦val.length和maxlength相同，就切换到下一个文本框。

演示

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

演示

- Selvakumar Arumugam

---

哇，这太棒了。我将与 click() 结合使用，以便在用户选择已经填充的文本框时重置值。现在，如果用户选择已填充的输入并键入数字，则会聚焦于不是下一个输入而是之后的输入（假设所有文本框都已填满）。在理想情况下，我猜它不需要在键入新数字之前删除数字（它会自动替换）。但是，我可以看出，对于超过 1 个字符限制的情况，这将变得很麻烦。这只是我的想法。无论如何，click() 将为我解决问题 :) - domino

@domino 不错的发现，但我就是放不下那个问题..所以这里有修复方案 >> http://jsfiddle.net/skram/qygB2/5/ << 请试一下并告诉我。 - Selvakumar Arumugam

如果输入类型被禁用，我应该修改什么才能使其正常工作？ - Freddy Sidauruk

它是否接受零值？我尝试了，但它不接受。此外，键号的含义是什么？ - user9437856

Answer 2

试试这个

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

- sathish gowda

---

我见过的模拟<tab>键按下的最佳解决方案。由于某种原因，$(':focusable')选择器在不扩展jQuery的情况下对我有效，因此我只需要四行代码来跟随//Get all ...注释。 - mike

Answer 3

那只会获取下一个元素，无论它是什么。你可能想要使用以下代码：

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

此外，应使用键盘抬起事件而不是按下事件，否则会太快地更改。

- Jivings

---

啊，是的。keyup函数能否以某种方式忽略删除/退格键？ - domino

实际上，还有一堆其他的键，比如制表键等会引起问题。我想最简单的方法就是只过滤数字？ - domino

@domino 那将是一个不同的问题。 - Jivings

如果您删除或使用退格键删除数字，则光标将自动跳转到下一个输入框。 - user9437856

Answer 4

这是我用来让回车键像制表符一样工作的代码，即按下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();

- Samuel Vicent

Answer 5

如果您只想查看下一个输入，但是在此之前有分隔符阻挡，就像这样。

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

- Phil Cook

Answer 6

在搜索和开发后，我找到了一个跨浏览器片段，可以根据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" />

- ggzone

Answer 7

这个功能完美运作，还会检查中间的输入是否填写。

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

});

- The concise

Answer 8

使用 keyup 事件，例如：

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

在实际应用中查看http://jsfiddle.net/qygB2/

- Anurag Uniyal

---

如果您删除或使用退格键删除数字，则光标将自动跳转到下一个输入框。 - user9437856

Answer 9

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

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

- marcos.borunda

Answer 10

在不命名类或ID的情况下，这将使焦点保持在文本框上。

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

- Mikeys4u