JS实现input自动切换焦点

最新推荐文章于 2024-02-11 09:00:00 发布

CrazBarry

最新推荐文章于 2024-02-11 09:00:00 发布

阅读量2.5k

点赞数

分类专栏： js

js 专栏收录该内容

14 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

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

<body>
    <form>
        <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 = {
            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;
                }
            },
            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, handler, false);
                } else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                } else {
                    element["on" + type] = null;
                }
            },
        };
        (function () {
            function tabForward(event) {
                event = EventUtil.getEvent(event);

                var target = EventUtil.getTarget(event);
                console.log(target.form)
                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>