前段時間學習了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>
以上就是代碼的全部內容了，個人感覺寫的還算比較全面，該考慮到的地方都做了處理，希望大家能夠喜歡。