js捕获键盘按键值，并且实现焦点切换

来源：互联网发布：js数组转换json字符串编辑：程序博客网时间：2024/05/03 17:52
<!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 onload="init();" onshow="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>
0 0