www.lom599.com这段代码是按照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:functionelement,type,handler{
            ifelement.addEventListener{
                element.addEventListenertype,handler,false;
            }else ifelement.attachEvent{
                element.attachEvent"on"+type,handler;
            }else{
                element["on"+type]=handler;
            }
        },
        removeHandler:functionelement,type,handler{
            ifelement.removeEventListener{
                element.removeEventListenertype,handle,false;
            }else ifelement.detachEvent{
                element.detachEvent"on"+type,handler
            }else{
                element["on"+type]=null;
            }
        },
        getEvent:functionevent{
            return event?event:window.event;
        },
        getTarget:functionevent{
            return event.target||event.srcElement;
        },
        preventDefault:functionevent{
            ifevent.preventDefault{
                event.preventDefault;
            }else{
                event.returnValue=false;
            }
        },
        stopPropagation:functionevent{
            ifevent.stopPropagation{
                event.stopPropagation;
            }else{
                event.cancelBubble=true;
            }
        }
    };
    function{
        function tabForwardevent{
            event=EventUtil.getEventevent;
            var target=EventUtil.getTargetevent;
            iftarget.value.length==target.maxlength{
                var form=target.form;
                forvar i=0,len=form.elements.length;i<len;i++{
                    ifform.elements[i]==target{
                        ifform.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.addHandlertextbox1,"keyup",tabForward;
        EventUtil.addHandlertextbox2,"keyup",tabForward;
        EventUtil.addHandlertextbox3,"keyup",tabForward;
    };

</script>

两处错误:
1.单词拼写错误(应为maxLength而非maxlength)

iftarget.value.length==target.maxlength

改为

iftarget.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: functionelement, type, handler {
                    ifelement.addEventListener {
                        element.addEventListenertype, handler, false;
                    } else ifelement.attachEvent {
                        element.attachEvent"on" + type, handler;
                    } else {
                        element["on" + type] = handler;
                    }
                },
                removeHandler: functionelement, type, handler {
                    ifelement.removeEventListener {
                        element.removeEventListenertype, handle, false;
                    } else ifelement.detachEvent {
                        element.detachEvent"on" + type, handler
                    } else {
                        element["on" + type] = null;
                    }
                },
                getEvent: functionevent {
                    return event ? event : window.event;
                },
                getTarget: functionevent {
                    return event.target || event.srcElement;
                },
                preventDefault: functionevent {
                    ifevent.preventDefault {
                        event.preventDefault;
                    } else {
                        event.returnValue = false;
                    }
                },
                stopPropagation: functionevent {
                    ifevent.stopPropagation {
                        event.stopPropagation;
                    } else {
                        event.cancelBubble = true;
                    }
                }
            };
            function {
                function tabForwardevent {
                    event = EventUtil.getEventevent;
                    var target = EventUtil.getTargetevent;
                    iftarget.value.length == target.maxLength {
                        var form = target.form;
                        forvar i = 0, len = form.elements.length; i < len; i++ {
                            ifform.elements[i] == target {
                                ifform.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.addHandlertextbox1, "keyup", tabForward;
                EventUtil.addHandlertextbox2, "keyup", tabForward;
                EventUtil.addHandlertextbox3, "keyup", tabForward;
            };
        </script>

    </body>

</html>

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

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

function{
    function tabForwardevent{
        event=EventUtil.getEventevent;
        var target=EventUtil.getTargetevent;
        iftarget.value.length==target.getAttributemaxlength{
            var form=target.form;
            forvar i=0,len=form.elements.length;i<len;i++{
                ifform.elements[i]==target{
                    ifform.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.addHandlertextbox1,"keyup",tabForward;
    EventUtil.addHandlertextbox2,"keyup",tabForward;
    EventUtil.addHandlertextbox3,"keyup",tabForward;
};

https://jsfiddle.net/stinsonz…

(看完/读完)这篇文章有何感想! www.lom599.com的分享…

发表评论

姓名 *
电子邮件 *
站点