JavaScript 表单：用回车键使焦点移到下一个元素中

最新推荐文章于 2023-12-03 21:15:16 发布

aij9817

最新推荐文章于 2023-12-03 21:15:16 发布

阅读量475

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/weixinyuai/p/4233717.html

版权

前段时间学习了 HTML 和 CSS，对这方面产生了兴趣，也开始学习了 javascript 高级编程(第三版)，这些天也一直在学，刚刚学到事件和表单脚本的内容。前几天，师傅让编写一段代码：是在 javascript 表单中，用回车键和上下左右移动键使焦点从一个文本框移到上一个或下一个文本框中。应用目前为止学到的知识试着编写代码，在编写的过程中遇到了几个难点：取模计算；在函数内部用 this 和 arguments 找到触发事件；使用 addHandler() 方法为事件添加事件处理程序。在老师的帮助下解决了以上几个问题，自己觉得通过这段代码学到了很多知识点，所以整理完后写上注释，发表一下下。

 1 <html>
 2 <head lang="en">
 3     <meta charset="UTF-8">
 4     <title></title>
 5 </head>
 6 <body>
 7 
 8     <form>
 9         <div><input type="text" ></div>
10         <div><input type="text" ></div>
11         <div><input type="text" ></div>
12         <div><input type="text" ></div>
13         <div><input type="text" ></div>
14         <div><input type="submit" ></div>
15     </form>
16 
17     <script>
18         function is_down(e) {
19             var isDown;
20             e = e || window.event;
21 
22             switch (e.keyCode) {
23 
24                 case 13:  //回车键
25                 case 39:  //向右移动键
26                 case 40:  //向下移动键
27                     isDown = true;
28                     break;
29 
30                 case 37:  //向左移动键
31                 case 38:  //向上移动键
32                     isDown = false;
33                     break;
34             }
35             return isDown;
36         }
37 
38         function key_up(){
39 
40             //调用函数时，函数本身会生成 this 和 arguments
41             //用 this 和 arguments 分别找到 field 和触发的事件
42             var e=arguments[1];
43             return is_down(e) === undefined ? true : handle_element(this, is_down(e));
44         }
45 
46         function handle_element(field, is_down) {
47             var elements = field.form.elements;
48             for (var i = 0, len = elements.length-1; i < len; i++) {
49                 if (field == elements[i]) {
50                     break;
51                 }
52             }
53 
54             i = is_down ? (i + 1) % len : (i - 1) % len;
55 
56             //(0===i && is_down) --> 最后一个文本框获得焦点后按向下的键
57             //(-1===i && !is_down) --> 第一个文本框获得焦点后按向上的键
58             if((0===i && is_down)||(-1===i && !is_down)){
59                 return true;
60             }
61 
62             elements[i].focus();
63             var element_arr = ['button', 'submit', 'reset', 'select-one', 'textarea'];
64             if (element_arr.join(',').indexOf(elements[i].type) > -1)
65                 elements[i].select();
66             return false;
67         }
68 
69         //取消回车默认提交表单事件
70         document.onkeydown = function(e) {
71             e = e || window.event;
72             if(e.keyCode == 13) {
73                 e.preventDefault ? e.preventDefault() : (e.returnValue = false);
74             }
75         };
76 
77 
78         //跨浏览器识别 addEventListener 和 attachEvent(IE)
79         function addHandler(element, type, handler) {
80             if (element.addEventListener)
81                 element.addEventListener(type, handler, false);
82             else if (element.attachEvent)
83                 element.attachEvent("on" + type, handler);
84             else
85                 element["on" + type] = handler;
86         }
87 
88         var elements = document.forms[0].elements;
89 
90         for (var i = 0, len = elements.length; i < len; i++) {
91             //为 keyup 事件添加 key_up 事件处理程序
92             addHandler(elements[i], "keyup", key_up);
93         }
94 
95     </script>
96 </body>
97 </html>

转载于:https://www.cnblogs.com/weixinyuai/p/4233717.html

aij9817

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 表单：用回车键使焦点移到下一个元素中

前段时间学习了 HTML 和 CSS，对这方面产生了兴趣，也开始学习了 javascript 高级编程(第三版)，这些天也一直在学，刚刚学到事件和表单脚本的内容。前几天，师傅让编写一段代码：是在 javascript 表单中，用回车键和上下左右移动键使焦点从一个文本框移到上一个或下一个文本框中。应用目前为止学到的知识试着编写代码，在编写的过程中遇到了几个难点：取模计算；在函数内部用...
复制链接

扫一扫