javascript - 一旦在不同容器中达到最大长度，就聚焦下一个输入

Question

我想在输入字段达到最大长度后关注下一个输入，但输入字段位于不同的容器中。

我的代码:

    $(document).ready(function(){
        $('input').keyup(function(){
            if($(this).val().length==$(this).attr("maxlength")){
                $(this).next().focus();
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="date" class="container_date">
    <div class="date_day" id="input_day">
        <input type="text" maxlength="2" name="input_day" id="1" value="">
    </div>
    <div class="date_month" id="input_month">
        <input type="text" maxlength="2" name="input_month" id="2" value="">
    </div>
    <div class="date_year" id="input_year">
        <input type="text" maxlength="4" name="input_year" id="3" value="">
    </div>
</div>


    <div id="time" class="container_time">
        <div class="time_hour" id="input_hour">
            <input type="text" maxlength="2" name="input_hour" id="1" value="">
        </div>
        <div class="time_minute" id="input_minute">
            <input type="text" maxlength="2" name="input_minute" id="2" value="">
        </div>
    </div>

Jquery 适用于同一 div/容器中的输入字段，但不适用于不同的 div/容器。如何在另一个 div/容器中也聚焦？

Answer 1

您可以尝试通过遍历 DOM 直到某个父元素并查找每个输入、确定当前输入元素并选择下一个输入来获取所有相关输入字段的列表。

我会提出一个不同的解决方案:使用 tabindex 属性。

div class="date_day" id="input_day">
    <input type="text" maxlength="2" tabindex="1" name="input_day" id="1" value="">
</div>
<div class="date_month" id="input_month">
    <input type="text" maxlength="2" tabindex="2" name="input_month" id="2" value="">
</div>
<div class="date_year" id="input_year">
    <input type="text" maxlength="4" tabindex="3" name="input_year" id="3" value="">
</div>

通过此功能，您可以创建关于“下一个”字段的非线性移动。焦点可以轻松移动到下一个:

$('input').keyup(function(){
  if($(this).val().length==$(this).attr("maxlength")){
        var tabIndex = +$(this).attr('tabindex');
        $('[tabindex=' + (+tabIndex+1) + ']').focus();
  }
});