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

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

迷茫 2017-04-11 13:27:05

[JavaScript讨论组]

294

迷茫

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

全部回复(3)

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

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

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

赞 +0

添加回复

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

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

赞 +0

添加回复

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

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>