JS监控键盘输入

最新推荐文章于 2024-01-15 21:35:53 发布

原创最新推荐文章于 2024-01-15 21:35:53 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

JS片段专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用键盘按键来控制HTML页面中指定元素位置的方法。通过监听键盘事件，实现元素在上下左右方向上的移动，并确保元素不会移出可视区域边界。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<script>
	function moveBox()
	{
		//	获取需要移动的元素的位置
		var box = document.getElementById("square");
		debugger;
		var width = parseInt(box.style.width);
		var height = parseInt(box.style.height);

		//	判断按键
		var keyCode = window.event.keyCode;
		
		if(keyCode == 97 || keyCode == 65)	//	a-->left
		{
			var dist = box.style.left;
			var newDist = parseInt(dist) - 20;
			if(newDist<0)
			{
				newDist=0;
			}
			box.style.left = newDist + "px";
		}
		else if(keyCode == 119 || keyCode == 87 )	//	w-->up
		{
			var dist = box.style.top;
			var newDist = parseInt(dist) - 20;
			if(newDist<0)
			{
				newDist = 0;
			}
			box.style.top = newDist + "px";
		}
		else if(keyCode == 115 || keyCode == 83)	//	s-->down
		{
			var dist = box.style.top;
			var newDist = parseInt(dist) + 20;
			if(newDist+height>window.innerHeight)
			{
				newDist=window.innerHeight-height;
			}
			box.style.top = newDist + "px";
		}
		else if(keyCode == 100 || keyCode == 68)	//	d-->right
		{
			var dist = box.style.left;
			var newDist = parseInt(dist) + 20;
				if(newDist+width>window.innerWidth)
			{
				newDist=window.innerWidth-width;
			}
			box.style.left = newDist + "px";
		}
	}
</script>

<body onkeypress="moveBox()">
	<p id="square" style="width:60px;height:60px;background:red;position:absolute;left:300px;top:200px"></p>
</body>
</html>