简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 这段代码是按照js高级程序设计书上写的，为什么实现不了自动切换焦点的功能呀？而且里面的tabForward函数不是很懂?
迷茫
迷茫 2017-04-11 13:27:05
0
3
262

<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">

<script>

var EventUtil={
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;
            }
        },
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handle,false);
            }else if(element.detachEvent){
                element.detachEvent("on"+type,handler)
            }else{
                element["on"+type]=null;
            }
        },
        getEvent:function(event){
            return event?event:window.event;
        },
        getTarget:function(event){
            return event.target||event.srcElement;
        },
        preventDefault:function(event){
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue=false;
            }
        },
        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
        }
    };
    (function(){
        function tabForward(event){
            event=EventUtil.getEvent(event);
            var target=EventUtil.getTarget(event);
            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();
                        }
                        return;
                    }
                }
            }
        }
        var textbox1=document.getElementById("txtTel1");
        var textbox2=document.getElementById("txtTel2");
        var textbox3=document.getElementById("txtTel3");

        EventUtil.addHandler(textbox1,"keyup",tabForward);
        EventUtil.addHandler(textbox2,"keyup",tabForward);
        EventUtil.addHandler(textbox3,"keyup",tabForward);
    })();

</script>

迷茫
迷茫

业精于勤，荒于嬉;行成于思，毁于随。

reply all(3)
刘奇
刘奇2017-04-11 13:29:05 3 floor

两处错误：
1.单词拼写错误（应为maxLength而非maxlength）

if(target.value.length==target.maxlength)

改为

if(target.value.length==target.maxLength)

2.input外面应该包一个form
否则var form=target.form;这句话里的target.form为null 没法往下跑

解释一下 你对于tabForward函数的疑问。这个函数主要是去捕获事件，当发生你调用参数里指定的事件的时候（这里你用的是keyup），先去检测有没有达到input允许输入的最大值（maxLength），达到以后就获取该input在form里的index，如果其不是最后一个 则让index+1序号的元素获取焦点

最后贴上修改后代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
    </head>

    <body>
        <form action="">
            <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">
        </form>
        <script>
            var EventUtil = {
                addHandler: function(element, type, handler) {
                    if(element.addEventListener) {
                        element.addEventListener(type, handler, false);
                    } else if(element.attachEvent) {
                        element.attachEvent("on" + type, handler);
                    } else {
                        element["on" + type] = handler;
                    }
                },
                removeHandler: function(element, type, handler) {
                    if(element.removeEventListener) {
                        element.removeEventListener(type, handle, false);
                    } else if(element.detachEvent) {
                        element.detachEvent("on" + type, handler)
                    } else {
                        element["on" + type] = null;
                    }
                },
                getEvent: function(event) {
                    return event ? event : window.event;
                },
                getTarget: function(event) {
                    return event.target || event.srcElement;
                },
                preventDefault: function(event) {
                    if(event.preventDefault) {
                        event.preventDefault();
                    } else {
                        event.returnValue = false;
                    }
                },
                stopPropagation: function(event) {
                    if(event.stopPropagation) {
                        event.stopPropagation();
                    } else {
                        event.cancelBubble = true;
                    }
                }
            };
            (function() {
                function tabForward(event) {
                    event = EventUtil.getEvent(event);
                    var target = EventUtil.getTarget(event);
                    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();
                                }
                                return;
                            }
                        }
                    }
                }
                var textbox1 = document.getElementById("txtTel1");
                var textbox2 = document.getElementById("txtTel2");
                var textbox3 = document.getElementById("txtTel3");

                EventUtil.addHandler(textbox1, "keyup", tabForward);
                EventUtil.addHandler(textbox2, "keyup", tabForward);
                EventUtil.addHandler(textbox3, "keyup", tabForward);
            })();
        </script>

    </body>

</html>

针对楼主看不见的情况。我决定贴一张图

Like +0
Add Reply
洪涛
洪涛2017-04-11 13:29:05 2 floor

这段代码里有一个错误，maxlength是一个attr不是prop，prop名称应该是maxLength 改为getAttribute获取，或maxLength就可以了，代码如下：

(function(){
    function tabForward(event){
        event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);
        if(target.value.length==target.getAttribute('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();
                    }
                    return;
                }
            }
        }
    }
    var textbox1=document.getElementById("txtTel1");
    var textbox2=document.getElementById("txtTel2");
    var textbox3=document.getElementById("txtTel3");

    EventUtil.addHandler(textbox1,"keyup",tabForward);
    EventUtil.addHandler(textbox2,"keyup",tabForward);
    EventUtil.addHandler(textbox3,"keyup",tabForward);
})();
Like +0
Add Reply
巴扎黑
巴扎黑2017-04-11 13:29:05 1 floor

https://jsfiddle.net/stinsonz...

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！