专栏首页前端之攻略多个input框自动切换焦点

多个input框自动切换焦点

使用Javascript可以从多个方面增强表单字段的易用性。其中,最常见的一种方式就是在用户填写完当前字段时,自动将焦点切换到下一个字段,必须知道用户已经输入了既定长度的数据(例如电话号码),输入一个后焦点切换到下一个输入框

    <!-- 自动切换焦点 -->
    <div id="telWrap">
      <input type="text" name="tel1" id="txtTel1" maxlength="3">
      <input type="text" name="tel2" id="txtTel2" maxlength="3">
      <input type="text" name="tel3" id="txtTel3" maxlength="4">
    </div>
  var textbox1 = document.getElementById("txtTel1")
  var textbox2 = document.getElementById("txtTel2")
  var textbox3 = document.getElementById("txtTel3")
  document.addEventListener("keyup",tabForward) // 使用事件代理,也可用下面的
  // textbox1.addEventListener("keyup",tabForward)
  // textbox2.addEventListener("keyup",tabForward)
  // textbox3.addEventListener("keyup",tabForward)
  function tabForward(event){
    var target = event.target
    if(target.value.length == target.maxLength){  // 注意不是maxlength
      var elements = document.getElementById("telWrap").getElementsByTagName("input")
      for(let i=0;i<elements.length;i++) {
        if(elements[i] == target){
          if(elements[i+1]){
            elements[i+1].focus()
          }
          return  // 退出当前函数
        }
      }
    }
  }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 渲染函数-深入 data 对象 原

    我们平时在家是很少看电视的,最近看了几期最强大脑,真的被震惊到了,为什么他们的大脑容量那么大呢?并且非常机敏。海量的信息可以在很短的时间内记住,真是最遥远的距离...

    tianyawhl
  • echart 添加主题 原

    <script src="../../dist/js/bar-line-theme.js"></script>

    tianyawhl
  • 在同一行布局的技巧 原

    例如上面的布局,我们可以使用里面元素浮动,外面的div高度为0的特点来布局,使2个div重叠在一起

    tianyawhl
  • 产品经理要懂得直播软件开发两种模式

    直播软件开发制作?直播软件开发需要哪些流程?现在很多人想开发一款自己的直播软件,但是对直播软件开发又不了解,因此会有很多疑问。

    山东布谷科技
  • 9月17-MySQL性能优化

    麦克劳林
  • 爱奇艺稳坐视频行业龙头,是百度长久战略合作伙伴

    爱奇艺完成15.3亿美金可转债认购,百度仅认购3亿美金。随着百度股权被摊薄,引起了外界的各种猜测。难道百度就要减持爱奇艺? ? 爱奇艺CEO龚宇 股份或许被摊薄...

    罗超频道
  • 关于百度CEO李彦宏在医学期刊Cell Research 发表医学论文所引来的舆论

    就在昨日,在医学领域有一个人成了很多科研的的话题,Baidu的CEO李彦宏在Cell Research 杂志(IF=17.848)发表论文的信息。李彦宏并非简单...

    DoubleHelix
  • Canvas绘制圆点线段 思路二 setLineDash方法+lineCap设置扩展

    他自己实现了一种思路,然后咨询我有没有更好的思路。 先看看他的思路是如何实现的,大致代码如下:

    用户3158888
  • 机器学习降维之线性判别模型(LDA)

    线性判别分析(Linear Discriminant Analysis, LDA)是一种监督学习的降维方法,也就是说数据集的每个样本是有类别输出。和之前介绍的机...

    小一
  • v-if与v-show的区别

    v-if指令与v-show指令都可以根据值动态控制DOM元素显示隐藏,v-if和v-show属于Vue的内部常用的指令,指令的职责是当表达式的值改变时把某些特殊...

    WindrunnerMax

扫码关注云+社区

领取腾讯云代金券