表单焦点自动切换
0
悬赏园豆：5
[已解决问题]
解决于 2017-10-30 09:50
<input type="text" class="txt" maxlength="5" placeholder="1"/>
<br/>
<input type="text" class="txt" maxlength="5" placeholder="2"/>
<br/>
<input type="text" class="txt" maxlength="5" placeholder="3"/>
<script>
var txt = document.getElementsByClassName("txt");
for(var i=0;i<txt.length;i++){
txt[i].onkeyup = function(){
if(this.value.length == 5){
this.blur();
txt[i+1].focus();
};
};
}
</script>
需求是这样的：在输入框输入内容之后，自动将焦点定位到下一个input上
最佳答案
0
怎么样算作输入内容？达到指定个数字符？总不能按一个键就切换吧？
收获园豆：5
当输入完5个字符后，自动将定位到下一个input的焦点
@少爷zwx: 改成这样
var txt = document.getElementsByClassName("txt"); for(var i=0;i<txt.length;i++){ (function(i){ txt[i].onkeyup = function(){ if(this.value.length == 5){ this.blur(); txt[i+1].focus(); }; };})(i); }
或者给input加一个属性记录下一个要focus的
var txt = document.getElementsByClassName("txt"); for(var i=0;i<txt.length;i++){ txt[i].dataset.nextid=i+1; txt[i].onkeyup = function(){ if(this.value.length == 5){ this.blur(); txt[this.dataset.nextid].focus(); }; }; }
还可以直接把var改成let，其他一切不变（es6特性）
@hehe_54321:
for(var i=0;i<txt.length;i++){ (function(i){ txt[i].onkeyup = function(){ if(this.value.length == 5){ this.blur(); txt[i+1].focus(); }; };})(i); }
这种写法是闭包的写法吗？我看不太懂这种写法(function(){......};)(i);求师兄指导一下
@hehe_54321: 还有一个问题，就是什么时候用(function(){})(i);这种函数写法
@少爷zwx: 这个，我也讲不清楚...不是专门搞这个的，只是了解过，建议去搜一下js闭包/作用域之类的资料
其他回答(3)
0
input 有个属性 tabindex设置切换顺序的索引
可以参考一下这篇文章
http://www.cnblogs.com/ywqu/archive/2010/09/13/1825355.html
0
用jquery吧，然后用$this查找他的兄弟元素试试
0
在循环中绑定函数，函数中又使用了索引，这里踩了闭包的坑
事件执行时的i应该一直时最后一个
是的，i一直是等于3。我需要怎么修改呢？谢谢
