Question

每个div容器有3个输入（例如first-section，second-section ...），我的页面上有几个这样的div个容器，类似于这样：

...
<div id="first-section">
    <fieldset>
        <legend>First Section</legend>
        <input type="number" placeholder="000" id="input1" min="0" max="255" autofocus maxlength="3" required>
...
    </fieldset>     
</div>
<div id="second-section">
    <fieldset>
        <legend>Second Section</legend>
        <input type="number" placeholder="000" id="input2" autofocus min="0" max="255" maxlength="3" required>
...

只有在用户输入maxlength后，我才能使用jQuery从input1转移到input2到input3（未显示）到input4（未显示）输入设置为3？我下面的jQuery不起作用，因为当我移动到第三个输入（未显示）时，它会将焦点重置为输入2。

$(':input').keyup(function(e){
    if($(this).val().length==$(this).attr('maxlength')){
        $(this).nextAll(':input').first().focus();

        if($('#input1').val().length==$('#input1').attr('maxlength')){
            $('#input2').focus();
        }
    }


})

Answer 1

你可以找到包含当前输入的div，然后找到div的下一个兄弟和下一个div元素中的输入，并将焦点设置为。

$(this).closest('div').next().find(':input').first().focus();

演示：Fiddle

Answer 2

以上问题有以下几个方面：

填充后无法移至上一个标签。
跳过已填充的文本框。
会使事情变得更糟。

使用以下易于配置和使用的jQuery插件：

开发者网站：http://www.mathachew.com/sandbox/jquery-autotab/

文档：https://github.com/Mathachew/jquery-autotab/blob/master/README.md

包括Angular和React示例

干杯...

将jQuery焦点转移到下一个div分离的输入

2 个答案: