一旦在不同容器中达到最大长度，就集中下一个输入 [英] Focus next input once reaching maxlength in different containers

问题描述

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

我的代码:

     $(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/container中的输入字段，但不适用于不同的div/container中的输入字段.如何也将注意力集中在另一个div/容器上?

解决方案

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

 $(document).ready(function(){
    $('input').keyup(function(){
        if($(this).val().length==$(this).attr("maxlength")){
            var i = $('input').index(this);
            $('input').eq(i+1).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> 

I want to focus next input once the input field reach the maxlength, but the input fields are in different containers.

My Code:

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

The Jquery works for input fields in the same div/container, but not in a different one. How to focus also in another div/container?

解决方案

Get the index of the current input by searching the matched elements $('input').index(this) Then you can select the next input in the matched elements with .eq(i+1)

$(document).ready(function(){
    $('input').keyup(function(){
        if($(this).val().length==$(this).attr("maxlength")){
            var i = $('input').index(this);
            $('input').eq(i+1).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>

这篇关于一旦在不同容器中达到最大长度，就集中下一个输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！