Question

我希望在输入字段达到maxlength后关注下一个输入，但输入字段位于不同的容器中。

我的代码：

    $(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 /容器？

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

Answer 2

通过搜索匹配的元素获取当前输入的索引$('input').index(this)然后，您可以使用.eq(i+1)

选择匹配元素中的下一个输入

＆＃13;

$(document).ready(function(){
    $('input').keyup(function(){
        if($(this).val().length==$(this).attr("maxlength")){
            var i = $('input').index(this);
            $('input').eq(i+1).focus();
        }
    });
});

＆＃13;

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

＆＃13;

在不同容器中达到最大长度时，将下一个输入聚焦

2 个答案: