div实现上下键,鼠标mouseover事件
<html><head><title></title><style type="text/css">div{width:200px;height:25px;border:1px solid;}</style><scripttype="text/javascript">//是否有div被选中var isSelect=false;function fun(obj){alert(obj.value);var t=document.getElementById("t");var t_val=t.value;if(t_val.length>5){t.value=t_val.substring(0,5);}}function fun1(obj){obj.style.background="";obj.blur();isSelect=false;}function fun2(obj){var divs=document.getElementsByTagName("div");for(var i=0;i<divs.length;i++){if(divs[i].style.background.length==7){if(i != obj.getAttribute("id")){divs[i].style.background="";obj.style.background="#6699FF";obj.focus();break;}}}if(!isSelect){obj.style.background="#6699FF";obj.focus();isSelect=true;}}function fun3(){var divs=document.getElementsByTagName("div");var len=divs.length;for(var i=0;i<len;i++){var divcolor=divs[i].style.background;if(divcolor.length==7){if(event.keyCode==38){divs[i].style.background="";if(i==0){i=len;}divs[i-1].style.background="#6699FF";divs[i-1].focus();break;}if(event.keyCode==40){divs[i].style.background="";if(i==len-1){i=-1;}divs[i+1].style.background="#6699FF";divs[i+1].focus();break;}}}if(!isSelect){if(event.keyCode==38){divs[len-1].style.background="#6699FF";divs[len-1].focus();isSelect=true;}if(event.keyCode==40){divs[0].style.background="#6699FF";divs[0].focus();isSelect=true;}}}function fun4(){var d=document.getElementById("d");d.focus();var divs=document.getElementsByTagName("div");for(var i=0;i<divs.length;i++){divs[i].onkeyup=function(){fun3();}}}</script></head><body onload="fun4()"><div id="d" onmouseover="fun2(this)" onmouseout="fun1(this)"></div><div id="d2" onmouseover="fun2(this)" onmouseout="fun1(this)"></div><div id="d3" onmouseover="fun2(this)" onmouseout="fun1(this)"></div><div id="d4" onmouseover="fun2(this)" onmouseout="fun1(this)"></div><div id="d5" onmouseover="fun2(this)" onmouseout="fun1(this)"></div><br><input id="t" type="text" onkeyup="fun3()"><input type="button" value="" onclick=""></body></html>