您的位置：首页 > Web前端 > JavaScript

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

2015-08-16 12:16 866 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航