文本框自动切换焦点实现方法

来源：互联网发布：淘宝好吃的零食店编辑：程序博客网时间：2024/05/21 17:21

html代码：

实现座机号码分段输入

<form>    <input type="text"  maxLength="3" value=""/>-    <input type="text"  maxLength="4" value=""/>-    <input type="text"  maxLength="4" value=""/></form>

js代码：

window.onload = function (){    //tabForward 公共方法    function tabForward(event){        var event = event || window.event;        var target = event.target || event.srcElement; //当前事件对象        if (target.value.length == target.maxLength) {//判断是否与目标字符数相等            var form = target.form,//获取form表单                len = form.elements.length,                i;            for (i=0;i<len;i++){//                if(form.elements[i] == target){                    if( form.elements[i+1]){                        form.elements[i+1].focus();//向下一个获取焦点                    }                    return;                }            }        }    }    var tel1 = document.getElementsByTagName("input")[0];    var tel2 = document.getElementsByTagName("input")[1];    var tel3 = document.getElementsByTagName("input")[2];    tel1.onkeyup = tabForward;    tel2.onkeyup = tabForward;    tel3.onkeyup = tabForward;}

逻辑比较简单，贴代码直接测试。

1 0