简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

javascript - 这段代码是按照js高级程序设计书上写的，为什么实现不了自动切换焦点的功能呀？而且里面的tabForward函数不是很懂?

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

迷茫迷茫2771 Il y a quelques jours266

répondre à tous(3)je répondrai

  • 怪我咯

    怪我咯2017-04-11 13:29:05

    两处错误：
    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>

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

    répondre
    0
  • PHP中文网

    PHP中文网2017-04-11 13:29:05

    这段代码里有一个错误，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);
})();

    répondre
    0
  • 巴扎黑

    巴扎黑2017-04-11 13:29:05

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

    répondre
    0
  • Annulerrépondre