利用Js自动切换焦点实现手机号码分段的输入

最新推荐文章于 2024-08-17 23:10:04 发布

前端小白进阶

最新推荐文章于 2024-08-17 23:10:04 发布

阅读量1.3k

点赞数

文章标签： javascript 自动切换焦点

本文链接：https://blog.csdn.net/qq_26102281/article/details/83796461

版权

以美国的电话号码为例，假设分为三段：区号、局号、和另外四位数字。，主要的实现思路为：

在一个文本框智能的字符达到最大的数量之后，自动将焦点切换到下一个文本框。换句话说，用户在第一个文本框中输入了3个数字之后，然后焦点就会切换到第二个文本框，在输入3个数字，焦点又会切换到第二个文本框。

<script>
  var oTxt1=document.getElementById("txt1");
  var oTxt2=document.getElementById("txt2");
  var oTxt3=document.getElementById("txt3");
  function tabForward()
  {
    var ev=ev||window.event;
    var target=ev.target;/*每一个txtx输入完整之后，都是一次完整的keyup事件*/
    var keyCode=ev.keyCode;
    
    if (target.value.length===target.maxLength)/*如果两个值相等，则需要查找表单字段的集合，直至找到下一个文本框*/
    {
      var form=target.form;
      for(var i=0,len=form.elements.length;i<len;i++)
      {
        if (form.elements[i]===target)
        {
          if (form.elements[i+1])
          {
            form.elements[i+1].focus();/*找到下一个文本框，将焦点切换到该文本框*/
          }
        }

      }
    }
  }
  oTxt1.onkeyup=tabForward;
  oTxt2.onkeyup=tabForward;
 /* oTxt3.onkeyup=tabForward;*/
</script>