<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>content</title>
<style type="text/css">
#nav{
font-size: 30px;
}
#nav_tab{
position: absolute;
left: 50%;
margin-left: -240px;
margin-top: 40px;
height: 50px;
width: 480px;
line-height: 20px;
text-align: center;
background-color: #CCCCCC;
border: 1px solid black;
border-collapse: collapse;
}
#nav_tab td{
border:1px solid black;
}
</style>
</head>
<body οnlοad="init();" οnshοw="show()">
<div id="nav">我是内容页</div>
<table id="nav_tab">
<tr>
<td id="num1">菜单一</td>
<td id="num2">菜单二</td>
<td id="num3">菜单三</td>
<td id="num4">返回首页</td>
</tr>
</table>
<script type="text/javascript">
document.onkeydown = eventHandler;
document.onsystemevent = eventHandler;
var position = 1; //定义全局变量
var td_all =document.getElementsByTagName("td");
var num = td_all.length;
function eventHandler(){
var keycode=event.which;
switch (keycode){
case 37: //左键键值。按下左键时,焦点左移
changeFocus(-1);
return false;
break;
case 39: //右键键值。按下右键时,焦点右移
changeFocus(+1);
return false;
break;
// case 13:
// if (position==num) { //设置当焦点在最后一栏按enter键时返回index页面(BToA)
// skip();
// }
}
}
function $(id){
return document.getElementById(id);
}
function init(){ //初始化页面焦点
$("num1").style.backgroundColor="#FFB400";
}
<!--------------------------实现焦点切换---------------------------------------------------->
function getFocus(_posNow){ //失去焦点
$("num"+_posNow).style.backgroundColor="#FFB400";
}
function loseFocus(_posPast){ //获得焦点
$("num"+_posPast).style.backgroundColor="#CCCCCC";
}
function changeFocus(_move){ //移动焦点
loseFocus(position);
position+=_move;
if (position<1) {
position=num;
}
if (position>num) {
position=1;
}
getFocus(position);
}
<!--------------------------实现焦点切换---------------------------------------------------->
function show(){ //每次进入页面时都保持焦点在第一个
loseFocus(4);
position=1;
$("num"+position).style.backgroundColor="#FFB400";
}
</script>
</body>
</html>
js捕获键盘按键值,并且实现焦点切换
最新推荐文章于 2022-05-20 16:26:32 发布