javascript實現按斷行符號鍵切換焦點，javascript焦點

最後更新：2015-02-11 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前段時間學習了 HTML 和 CSS，對這方面產生了興趣，也開始學習了 javascript 進階編程(第三版)，這些天也一直在學，剛剛學到事件和表單指令碼的內容。前幾天，老師讓編寫一段代碼：是在 javascript 表單中，用斷行符號鍵和上下左右移動鍵使焦點從一個文字框移到上一個或下一個文字框中。應用目前為止學到的知識試著編寫代碼，在編寫的過程中遇到了幾個痛點：模數計算；在函數內部用 this 和 arguments 找到觸發事件；使用 addHandler() 方法為事件添加事件處理常式。在老師的協助下解決了以上幾個問題，自己覺得通過這段代碼學到了很多知識點，所以整理完後寫上注釋，發表一下下。

複製代碼代碼如下:
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form>
        <div><input type="text" ></div>
        <div><input type="text" ></div>
        <div><input type="text" ></div>
        <div><input type="text" ></div>
        <div><input type="text" ></div>
        <div><input type="submit" ></div>
    </form>
    <script>
        function is_down(e) {
            var isDown;
            e = e || window.event;
            switch (e.keyCode) {
                case 13: //斷行符號鍵
                case 39: //向右移動鍵
                case 40: //向下移動鍵
                    isDown = true;
                    break;
                case 37: //向左移動鍵
                case 38: //向上移動鍵
                    isDown = false;
                    break;
            }
            return isDown;
        }
        function key_up(){
            //調用函數時，函數本身會產生 this 和 arguments
            //用 this 和 arguments 分別找到 field 和觸發的事件
            var e=arguments[1];
            return is_down(e) === undefined ? true : handle_element(this, is_down(e));
        }
        function handle_element(field, is_down) {
            var elements = field.form.elements;
            for (var i = 0, len = elements.length-1; i < len; i++) {
                if (field == elements[i]) {
                    break;
                }
            }
            i = is_down ? (i + 1) % len : (i - 1) % len;
            //(0===i && is_down) --> 最後一個文字框獲得焦點後按向下的鍵
            //(-1===i && !is_down) --> 第一個文字框獲得焦點後按向上的鍵
            if((0===i && is_down)||(-1===i && !is_down)){
                return true;
            }
            elements[i].focus();
            var element_arr = ['button', 'submit', 'reset', 'select-one', 'textarea'];
            if (element_arr.join(',').indexOf(elements[i].type) > -1)
                elements[i].select();
            return false;
        }
        //取消斷行符號預設提交表單事件
        document.onkeydown = function(e) {
            e = e || window.event;
            if(e.keyCode == 13) {
                e.preventDefault ? e.preventDefault() : (e.returnValue = false);
            }
        };
        //跨瀏覽器識別 addEventListener 和 attachEvent(IE)
        function addHandler(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;
        }
        var elements = document.forms[0].elements;
        for (var i = 0, len = elements.length; i < len; i++) {
            //為 keyup 事件添加 key_up 事件處理常式
            addHandler(elements[i], "keyup", key_up);
        }
    </script>
</body>
</html>

以上就是代碼的全部內容了，個人感覺寫的還算比較全面，該考慮到的地方都做了處理，希望大家能夠喜歡。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

javascript實現按斷行符號鍵切換焦點，javascript焦點

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support