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>

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

赞 (0)

相关推荐

  • Javascript中自动切换焦点实现代码

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test javascript</title> <script type="text/javascript"> window.onload = function() { var EventUtil = { addhandler:function

  • JavaScript判断表单为空及获取焦点的方法

    本文实例讲述了JavaScript判断表单为空及获取焦点的方法.分享给大家供大家参考,具体如下: <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> <html> <head> <meta http-equiv="Content

  • js实现获取焦点后光标在字符串后

    主要介绍了js实现获取焦点后光标在字符串后,原理就是获得焦点后重新把自己复制粘帖一下,喜欢的朋友可以看看 复制代码 代码如下: var t=$("#"+id).val(); $("#"+id).val("").focus().val(t); //其原理就是获得焦点后重新把自己复制粘帖一下

  • JavaScript 回车 焦点切换

    复制代码 代码如下: <script language='javascript' for='document' event='onkeydown'> if(event&&event.srcElement){ srcEle=event.srcElement; if((event.keyCode||event.charCode)==13 && srcEle.tagName.toUpperCase()=='INPUT' && srcEle.type.t

  • JavaScript 关于元素获取焦点(隐藏元素与div)

    1,隐藏元素无法获取焦点 2,对于div等特殊元素获取焦点 关于元素获取焦点 body { margin: 32px; font-family: Verdana, sans-serif; font-size: 14px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } 关于元素获取焦点: 1,隐藏元素无法获取焦点 下面有个隐藏的Input: 解决方法:先把元素显示,在获取焦点. 2,对于div等特殊元素获取焦点 我

  • JS实现方向键切换输入框焦点的方法

    JS实现方向键切换输入框焦点的方法

    本文实例讲述了JS实现方向键切换输入框焦点的方法.分享给大家供大家参考.具体如下: 这里实现js方向键控制切换输入框焦点效果,不过无法兼容Firefox.当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内,无需点击鼠标,对于经常录入数据的时候,这种功能可提高输入速度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • js/jquery获取文本框输入焦点的方法

    方法一. 复制代码 代码如下: function CheckForm() {             if(document.form1.trainingName.value==""){                     alert("培训班名称不能为空!");                     document.form1.trainingName.focus();                     return false;          

  • 通过JS来判断页面控件是否获取焦点

    以一个TextBox为例,使用javascript来判断其是否获取到焦点. 其实很简单,正常的思路分为两个途径来看: 当文本框为服务端控件的时候,我们可以很简单地想到使用:if(TextBox1.Focused)来进行判断,使用TextBox1.Attributes.add('onfocus','要执行的方法'); 来绑定方法.当然,服务端的控件也是可以使用JS来进行操作的,不过,需要提醒注意的是服务端的ID与实际客户端的ID很可能是不一样的,所以在使用getelementbyid的时候需要注意

  • javascript自动切换焦点控制效果完整实例

    本文实例讲述了javascript自动切换焦点控制的方法.分享给大家供大家参考,具体如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"><

  • js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性

    通过JS得到当前焦点的坐标 如下是得到当前焦点的坐标: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

随机推荐