前段時間學習了 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>
