javascript实现按回车键切换焦点


Posted in Javascript onFebruary 09, 2015

前段时间学习了 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>

以上就是代码的全部内容了,个人感觉写的还算比较全面,该考虑到的地方都做了处理,希望大家能够喜欢。

Javascript 相关文章推荐
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 #Javascript
JQuery中extend的用法实例分析
Feb 08 #Javascript
jQuery中noConflict()用法实例分析
Feb 08 #Javascript
jquery实现聚光灯效果的方法
Feb 06 #Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 #Javascript
JQuery中serialize()用法实例分析
Feb 06 #Javascript
jQuery中on()方法用法实例详解
Feb 06 #Javascript
You might like
PHP5 安装方法
2007/01/15 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python怎么提高计算速度
2020/06/11 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
培训演讲稿范文
2014/01/12 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
销售员态度差检讨书
2014/10/26 职场文书
2014年转正工作总结
2014/11/08 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
教师工作证明范本
2015/06/12 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
如何利用pygame实现打飞机小游戏
2021/05/30 Python
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
Python+Tkinter打造签名设计工具
2022/04/01 Python