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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
JS实现简易留言板特效
Dec 23 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 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
PHP中操作ini配置文件的方法
2013/04/25 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
python3实现暴力穷举博客园密码
2016/06/19 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
Python tornado上传文件的功能
2020/03/26 Python
Python 字符串池化的前提
2020/07/03 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
学用政策心得体会
2014/09/10 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
原生JS实现分页
2022/04/19 Javascript