JS键盘事件及键盘控制上下左右移动

最新推荐文章于 2024-06-18 19:37:48 发布
最新推荐文章于 2024-06-18 19:37:48 发布
阅读量1.2w 收藏 20
点赞数 3
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39132756/article/details/82953324
版权

JS键盘事件

键盘事件：完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。

keydown：按键按下

keyup：按键抬起

keypress：按键按下抬起

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<script src="js/dom01.js"></script>-->
		<style>
			#box{
				width: 400px;
				height: 400px;
				background: burlywood;
				margin: auto;
				position: relative;
				overflow: hidden;
			}
			#fj{
				width: 50px;
				height: 50px;
				background: red;
				position: absolute;
				top: 300px;
				left: 150px;
			}									
		</style>
	</head>
	<body>
		<div id="box">
			<div id="fj">
				小飞机
			</div>
		</div>						
	</body>
	<script>
		var fj=document.getElementById("fj");
	    document.onkeydown=function(e){ //键盘按下事件绑定
	 	var e=window.event||e;
		 	switch(e.keyCode){
		 		case 37: //左
		 		fj.style.left=Math.max(0,fj.offsetLeft-5)+"px";
		 		break; 
		 		case 38: //上
		 		fj.style.top=Math.max(0,fj.offsetTop-5)+"px";
		 		break;
		 		case 39:  //右
		 		fj.style.left=Math.min(350,fj.offsetLeft+5)+"px";
		 		break;	
		 		case 40:  //下
		 		fj.style.top=Math.min(350,fj.offsetTop+5)+"px";
		 		break;		 			
		 	}
	    }
	</script>
</html>

 

 

on my-own
关注
  • 3
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
【案例】JS键盘事件 实现元素上下左右移动效果
qq_57215961的博客
05-20 3994
分享 如何使用JS键盘事件 实现元素上下左右移动的效果 效果：按下键盘上的 上、下、左、右键，元素发生对应方向的移动 低配版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
前端学习（886）：常用的键盘事件
歌谣的博客
04-18 542
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
js实现键盘控制DIV移动的方法
10-24
主要介绍了js实现键盘控制DIV移动的方法,以实例形式完整的讲述了js控制div移动所涉及的css、js与html使用技巧,需要的朋友可以参考下
js实现上下左右键盘控制div移动
10-15
主要为大家详细介绍了js实现上下左右键盘控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript-事件类型（键盘事件，鼠标事件，焦点事件）
最新发布
2401_84123265的博客
06-18 694
/ 键盘按下时触发// 键盘按住时触发// 键盘弹起时触发该参数为事件对象，其中包含按键相关的一些属性。typekeycodekeyCodealtKeyctrKeyshiftKeymetaKeyrepeat可以通过检查这些属性来判断用户按下的是什么键，以及是否 ctrl 和 alt 等键是否同时按下:// 键盘按下是触发。
JavaScript 事件类型（键盘事件，鼠标事件，焦点事件）
QIANDXX的博客
04-23 1202
键盘事件 鼠标事件 焦点事件 键盘事件 事件 发生时机 onkeydown 键盘按键按下 keypress 键盘按键按住 keyup 键盘按键松开 监听某个按键事件 document.onkeydown = function(event) { // 键盘按下时触发 console.log('key down'); }; document.onkeypress = function(event) { // 键盘按住时触发 console.log.
JS 键盘事件 - Kaiqisan
Kaiqisan的博客
08-28 363
ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 这次讲讲键盘事件，如有不足之处，欢迎指出！ 键盘事件一共有仨 onkeydown: 键盘按下时触发，返回键盘的代码值(不区分大小写) onkeypress ： 键盘按下触发，返回当前输入的ASCII码的值（区分大小写） onkeyup: 键盘抬起时触发，获取的内容与onkeydown一样。 PS：需要注意的是onkeydown与onkeypress有着很大的一个区别就是onkeypress只能获取能获得输入的按键的编码，无法获取f1.
JavaScript——常用的键盘事件
shhghvvh的博客
11-26 5502
不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性。请注意，该特性随时可能无法正常工作。核心思路︰检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面。使用键盘事件对象里面的keyCode判断用户按下的是否是s键。onkeypress某个键盘按键被按下时触发︰但是。等调节性按键的状态和键盘的区域 / 和布局有关。搜索框获得焦点∶使用js 里面的focus()方法。返回用户按下的物理按键的值。
JS的键盘事件
m0_71966801的博客
07-09 1278
avaScript提供了一些用于处理键盘事件的事件类型。通过这些事件，你可以在用户按下或释放键盘上的键时执行相应的操作。：当用户按下并释放可打印字符键（如字母、数字、符号等）时触发该事件。注意，不同的浏览器可能对。：当用户按下键盘上的任意键时触发该事件。：当用户释放键盘上的任意键时触发该事件。事件的行为有所不同。
HTML：用键盘实现元素的方向移动
qq_51874203的博客
05-20 2117
案例:div的方向移动 body部分： <div id="ok">✈</div> style样式：自己设置大小灯样式，其中最重要的是要元素脱离文档流---不占页面位置了，其下也可以放其他元素。 #ok {position: absolute; } 补absolute：它的参照物是最近使用了定位的父级，如果没有找body。 此案例中div id="ok"的父级就是body。 首先：我们需要知道怎样将键盘中的按键与元素/对象相联系，能控制它。 这就是JS键盘事件
JS 事件 —— 键盘事件
白菜执笔人的博客
10-24 298
Web前端基础 学习笔记 一、JS 键盘事件 1.1、按下字符键触发 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS 键盘事件</title> <script type="text/javascript"> ...
js键盘移动事件
兔子骑着乌龟跑
05-17 171
keyboard_box_move <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
js 上下左右键控制焦点(示例代码)
10-26
4. 控制焦点移动的函数逻辑：在setpostion函数中，根据触发方向键事件的类型（上下左右），对变量x和y进行操作，来改变焦点的当前位置。这里通过判断条件来实现边界限制，使得焦点不能移出预定的区域。 5. 实现焦点...
javascript下用键盘控制层的移动的代码
10-30
- `<div id="Div">`: 定义了一个可被键盘控制移动的层。 - `<span id="Layer1">`: 控制键设置区，包括输入框等。 2. **CSS 样式**: - 使用 `position: absolute;` 来设置元素的绝对定位。 - 通过 `top` 和 `...
javascript实现ecshop搜索框键盘上下键切换控制
10-24
在ECShop商城系统中实现搜索框键盘上下键切换控制主要涉及到JavaScript编程技术，特别是事件监听与键盘事件处理。此项功能的实现可以使用户在输入关键词进行搜索时，通过键盘上的上下方向键来切换和选择搜索建议中的...
js键盘事件
m0_51281306的博客
11-09 2684
键盘事件是指当用户在操作键盘的时候会自动被触发的事件， 通 常有以下三种： ( 1) onkeydown: 用户按下任意键都可以触发这个事件。如果按住不 放， 事件会被连续触发。 (2) onkeypress: 用户按下任意键都可以触发这个事件 ( 功能键除外 ) 。 如果按住不放， 事件会被连续触发 (3) onkeyup: 用户释放按键时触发 ps ： 键盘事件一般绑定在需要用户输入的元素上(例如 i nput) ， 但是由于键盘事件默认采用事件冒泡机制， 因此将键盘事件直接 绑定在 body 之
js的键盘事件
子玉的博客
09-25 150
这只是一些基本的键盘事件示例，你可以根据需要使用这些事件来实现各种键盘交互。请注意，不同的浏览器可能会在事件对象上提供略有不同的属性，因此你可能需要进行一些浏览器兼容性处理。此外，你还可以阻止默认的键盘行为，例如阻止按键的默认滚动、放大缩小页面等。JavaScript提供了一种处理键盘事件的方式，可以让你捕捉用户在网页上按下、释放和持续按住键盘上的键的动作。这些键盘事件通常与JavaScript的事件监听器一起使用。
JS 键盘事件、触摸事件
boonyaxnn的博客
04-10 468
一、键盘事件：指当用户在操作键盘的时候会自动被触发的事件 keydown:键盘按下时触发 keypress:键盘按下时触发 功能键无法响应 keyup: 键盘抬起时触发 注意： 1.keydown keypress 按下不放一直触发； 2.keypress无法触发功能键 3.keypress无法捕获组合键 4.keypress 可以区分大写字母和小写字母 5.keydown 可以区分小键盘上...
JavaScript键盘事件及键盘码
weixin_52629158的博客
05-03 1037
有时候我们在表单进行提交前需要进行表单验证，如果验证不通过，那么就需要阻止表单提交的默认行为，下面介绍两种阻止此默认行为的方式。stopPropagation也是事件对象(Event)的一个方法，作用是 阻止目标元素的冒泡事件，但是 会不阻止默认行为。如果事件是可取消的，则 preventDefault() 方法会取消该事件，这意味着属于该事件的默认操作将不会发生。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。方法来阻止默认行为。
控制键盘上下左右让div 移动
04-26
要让div移动，可以通过以下步骤来实现： 1. 给div设置position属性为“absolute”或“fixed”。 2. 通过JavaScript监听键盘事件，例如keydown或keyup事件。 3. 在事件处理程序中，通过键盘事件中的keyCode属性来判断用户按下了哪个键。 4. 根据用户按下的键，设置div的left和top属性来改变div的位置。 以下是一个基本的示例代码： ``` <div id="myDiv" style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background-color: red;"></div> <script> var div = document.getElementById('myDiv'); var left = parseInt(div.style.left); var top = parseInt(div.style.top); document.addEventListener('keydown', function(event) { if (event.keyCode === 37) { // 左箭头 left -= 10; } else if (event.keyCode === 38) { // 上箭头 top -= 10; } else if (event.keyCode === 39) { // 右箭头 left += 10; } else if (event.keyCode === 40) { // 下箭头 top += 10; } div.style.left = left + 'px'; div.style.top = top + 'px'; }); </script> ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值