快捷導(dǎo)航

javascript實(shí)現(xiàn)按回車鍵切換焦點(diǎn)

更新時間：2015年02月09日 08:50:22 投稿：hebedich

這篇文章主要介紹了javascript實(shí)現(xiàn)按回車鍵切換焦點(diǎn)的方法,需要的朋友可以參考下

前段時間學(xué)習(xí)了 HTML 和 CSS，對這方面產(chǎn)生了興趣，也開始學(xué)習(xí)了 javascript 高級編程(第三版)，這些天也一直在學(xué)，剛剛學(xué)到事件和表單腳本的內(nèi)容。前幾天，老師讓編寫一段代碼：是在 javascript 表單中，用回車鍵和上下左右移動鍵使焦點(diǎn)從一個文本框移到上一個或下一個文本框中。應(yīng)用目前為止學(xué)到的知識試著編寫代碼，在編寫的過程中遇到了幾個難點(diǎn)：取模計算；在函數(shù)內(nèi)部用 this 和 arguments 找到觸發(fā)事件；使用 addHandler() 方法為事件添加事件處理程序。在老師的幫助下解決了以上幾個問題，自己覺得通過這段代碼學(xué)到了很多知識點(diǎn)，所以整理完后寫上注釋，發(fā)表一下下。

復(fù)制代碼代碼如下:

<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(){

            //調(diào)用函數(shù)時，函數(shù)本身會生成 this 和 arguments

            //用 this 和 arguments 分別找到 field 和觸發(fā)的事件

            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) --> 最后一個文本框獲得焦點(diǎn)后按向下的鍵

            //(-1===i && !is_down) --> 第一個文本框獲得焦點(diǎn)后按向上的鍵

            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;

        }

        //取消回車默認(rèn)提交表單事件

        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>