在不同容器中达到最大长度后，将焦点放在下一个输入上
在不同容器中达到最大长度后，将焦点放在下一个输入上
提问于 2017-12-21 10:45:18
当输入字段达到最大长度时，我希望关注下一个输入，但输入字段位于不同的容器中。
我的代码：
$(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/容器中也获得焦点？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-12-21 11:22:11
通过搜索匹配的元素$('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>
Stack Overflow用户
发布于 2017-12-21 11:00:18
您可以尝试通过遍历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();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47923234
复制相关文章
相似问题
腾讯云开发者
