美文网首页
Input联动-根据条件自动进入上一个/下一个输入框

Input联动-根据条件自动进入上一个/下一个输入框

作者: Pomelo的笔记本 | 来源:发表于2020-04-16 17:14 被阅读0次

Html代码,定义三个input输入框,文本长度最大为3

<input id="input1" type="text" onkeydown="check(this)" maxlength="3">
<input id="input2" type="text" onkeydown="check(this)" maxlength="3">
<input id="input3" type="text" onkeydown="check(this)" maxlength="3">      

js代码,处理onkeydown事件(当松开键盘按键的时候)

<script>
   function check(obj) {
      var val = parseInt(obj.id.split("avid")[1])
      // 当input文本长度为3,且不是最后一个input组件时,进入下一个input组件
      if (document.getElementById(obj.id).value.length == 3 && val < 3) {
        $('#avid'+ ++val).focus();
      }
      // 当input文本长度为0,且不是第一个input组件时,进入上一个input组件
      if (document.getElementById(obj.id).value.length == 0 && val > 1) {
        $('#avid' + --val).focus();
      }
    }
</script>

[个人博客]四分体 - sifenti.com

相关文章

网友评论

      本文标题:Input联动-根据条件自动进入上一个/下一个输入框

      本文链接:https://www.haomeiwen.com/subject/ecrdvhtx.html