首页 新闻 赞助 找找看

表单焦点自动切换

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上

少爷zwx的主页 少爷zwx | 初学一级 | 园豆:159
提问于:2017-10-18 14:27
< >
分享
最佳答案
0

怎么样算作输入内容?达到指定个数字符?总不能按一个键就切换吧?

收获园豆:5
hehe_54321 | 小虾三级 |园豆:750 | 2017-10-18 17:12

当输入完5个字符后,自动将定位到下一个input的焦点

少爷zwx | 园豆:159 (初学一级) | 2017-10-19 15:11

@少爷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 | 园豆:750 (小虾三级) | 2017-10-20 18:30

@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);求师兄指导一下

少爷zwx | 园豆:159 (初学一级) | 2017-10-30 09:53

@hehe_54321: 还有一个问题,就是什么时候用(function(){})(i);这种函数写法

少爷zwx | 园豆:159 (初学一级) | 2017-10-30 09:58

@少爷zwx: 这个,我也讲不清楚...不是专门搞这个的,只是了解过,建议去搜一下js闭包/作用域之类的资料

hehe_54321 | 园豆:750 (小虾三级) | 2017-10-30 17:38
其他回答(3)
0

input 有个属性 tabindex设置切换顺序的索引

可以参考一下这篇文章

http://www.cnblogs.com/ywqu/archive/2010/09/13/1825355.html

、熙和 | 园豆:1508 (小虾三级) | 2017-10-19 09:56
0

用jquery吧,然后用$this查找他的兄弟元素试试

小西子 | 园豆:72 (初学一级) | 2017-10-19 17:52
0

在循环中绑定函数,函数中又使用了索引,这里踩了闭包的坑

事件执行时的i应该一直时最后一个

文飞扬 | 园豆:228 (菜鸟二级) | 2017-10-19 20:56

是的,i一直是等于3。我需要怎么修改呢?谢谢

支持(0) 反对(0) 少爷zwx | 园豆:159 (初学一级) | 2017-10-20 10:21
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册