jquery - JQuery 中的自动选项卡

Question

我已将 autotab.js 下载到我的应用程序中。我正在尝试在我的应用程序中使用它。

我有一个 Form ，我想在填写一个输入字段后自动跳到下一个输入 DOM 元素。同时，该 Form 仅在页面中生成，因此我无法使用带有字段 id 作为已知因素的自动选项卡.如何使用 JQuery 执行此操作。

Answer 1

如果您无法将 id 添加到输入中，则需要为这些属性找到不同的选择器。

如果您打算发送此数据，您可能已经知道这些标签的名称。然后您可以使用以下选择器按名称匹配下一个输入:

$('input[name=nextInputName]')

否则，您始终可以使用 children() 和 parent() 方法调用的组合来查找下一个元素，以便从当前输入遍历到接下来。

我个人认为最简单的解决方案是分配 id，即使在 jQuery 中也无法在 HTML 中这样做:这将使自动聚焦变得更容易。

var counter = 0;
$('input').each(function () {
    if (!$(this).attr('id')) {
        $(this).attr('id', 'autofocus' + counter);
        counter += 1;
    }
});

您可以更改选择器以跳过一些您不希望具有自动对焦功能的元素。

然后您甚至可以自己用几行写下自动对焦:

$('input[id^=autofocus]').keyup(function () {
    if ($(this).val().length === $(this).attr('maxlength')) {
        var id = $(this).attr('id').match(/^autofocus(\d+)$/[1]);
        var nextId = Number(id) + 1;
        $('#autofocus' + nextId).focus()
    }
});