javascript实现按回车键切换焦点

160 阅读 0 评论 106 点赞

我是靠谱客的博主善良饼干，最近开发中收集的这篇文章主要介绍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>

    </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>