javascript实现按回车键切换焦点
前段时间学习了HTML和CSS，对这方面产生了兴趣，也开始学习了javascript高级编程(第三版)，这些天也一直在学，刚刚学到事件和表单脚本的内容。前几天，老师让编写一段代码：是在javascript表单中，用回车键和上下左右移动键使焦点从一个文本框移到上一个或下一个文本框中。应用目前为止学到的知识试着编写代码，在编写的过程中遇到了几个难点：取模计算；在函数内部用this和arguments找到触发事件；使用addHandler()方法为事件添加事件处理程序。在老师的帮助下解决了以上几个问题，自己觉得通过这段代码学到了很多知识点，所以整理完后写上注释，发表一下下。
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
</head>
<body>
<form>
<div><inputtype="text"></div>
<div><inputtype="text"></div>
<div><inputtype="text"></div>
<div><inputtype="text"></div>
<div><inputtype="text"></div>
<div><inputtype="submit"></div>
</form>
<script>
functionis_down(e){
varisDown;
e=e||window.event;
switch(e.keyCode){
case13: //回车键
case39: //向右移动键
case40: //向下移动键
isDown=true;
break;
case37: //向左移动键
case38: //向上移动键
isDown=false;
break;
}
returnisDown;
}
functionkey_up(){
//调用函数时，函数本身会生成this和arguments
//用this和arguments分别找到field和触发的事件
vare=arguments[1];
returnis_down(e)===undefined?true:handle_element(this,is_down(e));
}
functionhandle_element(field,is_down){
varelements=field.form.elements;
for(vari=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)){
returntrue;
}
elements[i].focus();
varelement_arr=['button','submit','reset','select-one','textarea'];
if(element_arr.join(',').indexOf(elements[i].type)>-1)
elements[i].select();
returnfalse;
}
//取消回车默认提交表单事件
document.onkeydown=function(e){
e=e||window.event;
if(e.keyCode==13){
e.preventDefault?e.preventDefault():(e.returnValue=false);
}
};
//跨浏览器识别addEventListener和attachEvent(IE)
functionaddHandler(element,type,handler){
if(element.addEventListener)
element.addEventListener(type,handler,false);
elseif(element.attachEvent)
element.attachEvent("on"+type,handler);
else
element["on"+type]=handler;
}
varelements=document.forms[0].elements;
for(vari=0,len=elements.length;i<len;i++){
//为keyup事件添加key_up事件处理程序
addHandler(elements[i],"keyup",key_up);
}
</script>
</body>
</html>
以上就是代码的全部内容了，个人感觉写的还算比较全面，该考虑到的地方都做了处理，希望大家能够喜欢。