JS-键盘事件之方向键移动元素

注意三点：
1：事件名称onkeydown。
2：事件加给document，而非window。
3：把元素的top，left值分别用offsetTop，offsetLeft来设定。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>键盘移动</title><style type="text/css">*{margin: 0;padding: 0;}h3{position: absolute;width: 200px;background: cadetblue;color: #fff;padding: 20px;}</style></head><body><h3 id="h3">注意三点：<br />1：事件名称onkeydown<br />2：事件加给document，而非window。<br />3： 把元素的top，left值分别用offsetTop，offsetLeft来设定</h3></body>

js效果：【这里用了switch语句来进行判断】

<script type="text/javascript">window.onload = function(){var oH3 = document.getElementById("h3");document.onkeydown = function(ev){var ev = ev || window.event;switch(ev.keyCode){case 37:case 100:oH3.style.left =  oH3.offsetLeft - 10 + "px";break;case 38:case 104:oH3.style.top = oH3.offsetTop - 10 + "px";break;case 39:case 102:oH3.style.left = oH3.offsetLeft + 10 + "px";break;case 40:case 98:oH3.style.top = oH3.offsetTop + 10 + "px";break;default:console.log("请按上下左右键");break;}console.log(oH3.offsetTop+"+"+oH3.style.top);console.log(ev.keyCode);}}</script>

键值 keyCode说明：

数字小键盘中对应的上下左右：

JS-键盘事件之方向键移动元素相关推荐

Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件键盘事件在vue项目中监听键盘事件--keydown 键盘常用键的keyCode值键盘事件在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘 ...
java怎么实现人物的行走,js键盘事件实现人物的行走
本文实例为大家分享了js键盘事件实现人物行走的具体代码,供大家参考,具体内容如下描述: 小时候喜欢玩的一个游戏,魔塔,实现了人物的行走,以及跳跃,当然是2D的效果. 用到的图: 效果: 代码: Ti ...
用JS键盘事件来移动图片
开发工具与关键技术: VS 2019/JS 作者:唐嘉怡撰写时间:2022/4/18 小时候都玩过下水道修理工的游戏吧,那其实是一个很简单的小游戏,用简单的JS技术就可以实现,现在我来示范一下最简单 ...
JS键盘事件(非常详细)
在JavaScript中,当用户操作键盘时,会触发键盘事件,键盘事件主要包括下面3中类型: keydown: 在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是Opera浏览器不支持这种 ...
JS键盘事件获取键盘码
JS中的键盘事件 keydown:在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种连续操作.该事件处理函数返回 false 时,会取消默认的动作(如输入 ...
JS键盘事件—onkeydown，onkeyup
键盘事件 onkeydown 按键被按下对于某个按键一直按着不放,则事件会一直触发当onkeydown连续触发式,第一次和第二次之间会有一个间隔时间,其他之后会非常的快这种设计是为了防止我们误操 ...
HTML DOM 事件 —— 键盘事件 JS键盘事件
键盘事件如果想实现快捷的页面操作,或者是一些前端的游戏,了解键盘事件很重要: onkeydown 某个键盘按键被按下 onkeypress 某个键盘按键被按下并松开 onkeyup 某个键盘按键被松 ...
js键盘事件中的键码对照表
JS中的键盘事件经常用到,收集了键盘事件对应的键码来分享下: keyCode 对应按键 8 BackSpace BackSpace 9 Tab Tab 12 Clear 13 Enter 16 S ...
JS 键盘事件、触摸事件
一.键盘事件:指当用户在操作键盘的时候会自动被触发的事件 keydown:键盘按下时触发 keypress:键盘按下时触发功能键无法响应 keyup: 键盘抬起时触发注意: 1.keydown ke ...
[js] 键盘事件 keydown keypress
不是所有标签都可以直接绑定触发键盘事件只有可以获取焦点的标签可以直接绑定触发键盘事件可以获取焦点的常见标签: input select>option textarea button ...

JS-键盘事件之方向键移动元素

JS-键盘事件之方向键移动元素相关推荐

最新文章

热门文章