本文介绍如何使用JavaScript实现表单中多个文本框的焦点自动切换功能。通过监听keyup事件，结合keyCode判断回车键及上下左右方向键，利用取模运算计算目标元素索引，实现焦点在输入框间的循环移动，并阻止回车键默认提交行为。
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>上述代码完整实现了表单焦点的键盘导航功能，涵盖了边界处理与兼容性兼容，力求逻辑严密。希望该示例能为需要类似功能的开发者提供参考与帮助。