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

最新推荐文章于 2022-05-20 16:26:32 发布

Kanglizi

最新推荐文章于 2022-05-20 16:26:32 发布

阅读量2.6k

点赞数

分类专栏： JavaScript历程文章标签： Javascript 焦点按键值

本文链接：https://blog.csdn.net/Kanglizi/article/details/47701423

版权

JavaScript历程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

Kanglizi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js捕获键盘按键值，并且实现焦点切换

content #nav{ font-size: 30px; } #nav_tab{ position: absolute; left: 50%; margin-left: -240px; margin-top: 40px; height: 50px; width: 480px; line-height: 20px; text
复制链接

扫一扫

专栏目录