键盘事件移动div

最新推荐文章于 2023-07-07 11:04:23 发布
最新推荐文章于 2023-07-07 11:04:23 发布
阅读量169 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen2745213271/article/details/116990897
版权

在HTML里面写一个简单的div，随便添加一点CSS样式，但是必须添加定位。如下图

然后就是js了，首先获取到这个div，并给页面绑定键盘事件和获取事件对象

用键盘事件的事件对象里的keyCode来确认键盘被点击时那个键被点击了，然后判断就可以在键触发时触发对应的操作，这里用两种方法判断

第一种if判断

第二种switch判断

    总的来说，要先获取到需要移动的元素，给元素在可移动的区域绑定键盘事件，通过事件对象的keyCode来确认键盘的那个键被触发了，接着使用判断判断四个箭头键的那个方向的键被触发或者不是这四个键，判断好后就给对应的键执行对应的代码，而移动也是改变top和left的值来达到效果，这就是为什么我开始时说要写定位。

 

 

 

 

 

浅橙boy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何让div span等元素能响应键盘事件操作指南
09-05
在我这几天的工作中遇到了一个问题，我有一个可编辑的div，并且在DIV里面还有一个可编辑的span，我想要让span能响应键盘事，想实现这种效果，应该如何实践呢
键盘事件 控制div移动
Gnaf12345的博客
05-22 221
第一种： 不太适用，div移动的不顺利 window.onkeydown=function(e){ var l=dOk.offsetLeft; var t=dOk.offsetTop; if(e.keyCode===37){ l-=5; }else if(e.keyCode===38){ t-=5; }else if(e.keyCode===39){ l+=5; }else if(e.keyCode===40){ t+=5; } dOk.style.left=l+'px'; dO.
js键盘事件--实现div移动
qq_44604924的博客
08-22 855
用键盘事件实现div移动 键盘事件：onkeydown 按键按下，连续按下时，第一次和第二次会停顿一下，防止误操作 onkeyup 按键松开 这两个事件一般会绑定给可以获取焦点的一些元素或者document元素 可通过keyCode来获取按键的编码 除此之外还有altkey,shiftkey,ctrlkey keyCode 37左 38上 39 右 40下 js代码如下： <script type="text/javascript"> /* 键盘事件：onkeydown 按键按下
js_键盘事件-键盘控制div移动
weixin_47295886的博客
10-26 276
/使得div可以根据不同的方向键移动。第一下：有一个卡顿——只后需要修改。按下ctrl速度变快。
div绑定键盘点击事件
最新发布
qq_42244911的博客
07-07 1021
【代码】div绑定键盘点击事件。
JavaScript利用键盘码控制div移动
11-21
-- JavaScript代码用于处理键盘事件并控制div移动 --> var oBox = document.getElementById("box"); // 获取div元素 var x = 0; // 初始化div的x坐标 var y = 0; // 初始化div的y坐标 // 监听键盘事件，...
js实现键盘控制DIV移动的方法
10-24
主要介绍了js实现键盘控制DIV移动的方法,以实例形式完整的讲述了js控制div移动所涉及的css、js与html使用技巧,需要的朋友可以参考下
js实现键盘操作实现div的移动或改变的原理及代码
10-25
实现键盘操作实现div的移动，最关键的一点：获取div对象，下面有个不错的示例，大家可以参考下
js实现上下左右键盘控制div移动
10-15
标签“js上下键盘控制div移动”、“js键盘控制div移动”、“js上下左右键盘控制”进一步强调了这个话题的核心，即利用JavaScript处理键盘事件，并据此改变div的CSS属性（如`top`和`left`）来实现移动效果。...
div内绑定键盘事件及注意事项
rainyspring4540的专栏
08-13 1071
贴上案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../../jquery.min.js"></script> </style> </head> <bo
DIV元素响应键盘事件源码
01-21
这是博客对应的源码，供朋友们下载分享，博文解析了DIV元素响应键盘事件的原理，实现方法，对应博客地址：http://blog.csdn.net/harvic880925/article/details/8524720
div上绑定keyDown事件
qq_39409541的博客
02-13 1648
tabindex的用法，keydown，keyup，keypress事件
web div绑定键盘事件
qq_45457760的博客
05-27 110
方法一： 如果是实现页面元素移动，不需要键盘导航 $(document).keydown(function(e){ console.log(e.which); }); 方法二： 用tabindex绑定 <a href="http://www.w3school.com.cn/" tabindex="2">W3School</a> tabindex规定元素的tab键控制次序，需要先用tab聚焦到该属性，再进行操作。 也可以先给该元素聚焦，去掉聚焦的虚线，即可直接使用键
通过键盘事件实现div移动
weixin_43706763的博客
08-09 122
通过键盘事件实现div移动 <style> .box { width: 200px; height: 200px; background-color: skyblue; position: absolute; top: 200px; left: 200px; } </style> </he
javascript之键盘事件案例，按键移动div
persistsss的博客
08-26 244
键盘事件案例，按w,a,sd键移动div <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{
JS div键盘控制移动
甘乐2333的博客
06-04 185
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 50px; ...
HTML DOM 事件 —— 键盘事件 JS键盘事件
Yxd0724的博客
08-31 4317
如果想实现快捷的页面操作，或者是一些前端的游戏，了解键盘事件很重要；onkeydown 某个键盘按键被按下onkeypress 某个键盘按键被按下并松开onkeyup 某个键盘按键被松开这些键盘事件可以使用于,,,,,,,,,, 和......
解决：div获取不到键盘事件
学习使我快乐_玉祥
06-26 771
今天给div添加按键监听的时候才发现，居然拿不到监听事件查阅资料后发现，原来html元素还有按焦点分类的情况，因为键盘与鼠标不同：（1）鼠标可以通过移动，选择触发的元素（2）键盘不知道应该将按键信息传递给哪个元素，也不可能每次输入都将鼠标移动到元素内部，再进行键盘输入........但是因为有了焦点这个概念，一般情况焦点最多存在一个，于是键盘就可以根据焦点所在元素进行输出。我们可以通过元素自带的tabindex属性为div添加可以拥有焦点的权限。tabindex="-1" 元素拥有焦点权限，选中不会
js键盘控制div移动
05-11
你可以使用JavaScript监听键盘事件，通过修改div的css来实现移动。以下是一个简单的实现示例： HTML代码： ```html <div id="box"></div> ``` CSS代码： ```css #box { width: 100px; height: 100px; background-color: red; position: absolute; top: 0; left: 0; } ``` JavaScript代码： ```javascript var box = document.getElementById("box"); var step = 10; // 移动距离 document.onkeydown = function(e) { e = e || window.event; switch (e.keyCode) { case 37: // 左箭头 box.style.left = parseInt(box.style.left) - step + "px"; break; case 38: // 上箭头 box.style.top = parseInt(box.style.top) - step + "px"; break; case 39: // 右箭头 box.style.left = parseInt(box.style.left) + step + "px"; break; case 40: // 下箭头 box.style.top = parseInt(box.style.top) + step + "px"; break; default: break; } }; ``` 在上面的代码中，我们首先获取了要移动的div元素和每次移动的距离step。然后通过监听键盘事件，根据不同的键码来修改div的left和top属性，从而实现移动。其中，parseInt()函数用于将字符串类型的left和top属性值转换为数值类型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值