javascript實作按回車鍵切換焦點_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

javascript實作按回車鍵切換焦點_javascript技巧

May 16, 2016 pm 04:15 PM

javascript 回車

前段時間學習了 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>

    

    <script><br />
        function is_down(e) {<br />
            var isDown;<br />
            e = e || window.event;<br />
            switch (e.keyCode) {<br />
                case 13:  //以回車鍵<br />
                case 39:  //朝右移鍵<br />
                case 40:  //向下移動鍵<br />
                    isDown = true;<br />
                    break;<br />
                case 37:  //以左邊移動鍵<br />
                case 38:  //使用鍵上移動鍵<br />
                    isDown = false;<br />
                    break;<br />
            }<br />
            return isDown;<br />
        }<br />
        function key_up(){<br />
            //呼叫函數時，且函數本身會產生 this 與 arguments<br />
            //以 this 和 arguments 分別找出 field 與觸發的事件<br />
            var e=arguments[1];<br />
            return is_down(e) === undefined ? true : handle_element(this, is_down(e));<br />
        }<br />
        function handle_element(field, is_down) {<br />
            var elements = field.form.elements;<br />
            for (var i = 0, len = elements.length-1; i < len; i ) {<br />
                if (field == elements[i]) {<br />
                    break;<br />
                }<br />
            }<br />
            i = is_down ? (i 1) % len : (i - 1) % len;<br />
            //(0===i && is_down) --> 最後一個文字方塊取得焦點後按下向下的鍵<br />
            //(-1===i && !is_down) --> 第一個文字方塊取得焦點後按下向上的鍵<br />
            if((0===i && is_down)||(-1===i && !is_down)){<br />
                return true;<br />
            }<br />
            elements[i].focus();<br />
            var element_arr = ['button', 'submit', 'reset', 'select-one', 'textarea'];<br />
            if (element_arr.join(',').indexOf(elements[i].type) > -1)<br />
                elements[i].select();<br />
            return false;<br />
        }<br />
        //取消回車預設提交表單事件<br />
        document.onkeydown = function(e) {<br />
            e = e || window.event;<br />
            if(e.keyCode == 13) {<br />                e.preventDefault ? e.preventDefault() : (e.returnValue = false);<br />
            }<br />
        };<br />
        //跨瀏覽器辨識 addEventListener 與 attachEvent(IE)<br />
        function addHandler(element, type, handler) {<br />
            if (element.addEventListener)<br />
                element.addEventListener(type, handler, false);<br />
            else if (element.attachEvent)<br />
                element.attachEvent("on" type, handler);<br />
            else<br />
                element["on" type] = handler;<br />
        }<br />
        var elements = document.forms[0].elements;<br />
        for (var i = 0, len = elements.length; i < len; i ) {<br />
            //為 keyup 事件新增 key_up 事件處理程序<br />
            addHandler(elements[i], "keyup", key_up);<br />
        }<br />
    </script>