键盘事件案例

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量354 收藏
点赞数
分类专栏： 其他 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A0940/article/details/124231035
版权

首先引入我们图片并设置id名，用通配符去掉默认的外边距属性。获取到图片id，然后监听键盘事件，当键盘的某个按键按下时，设置事件对象兼容，为了兼容IE8以下的浏览器，再获取到上下左右的键盘码，分别是上=>38；下=>40；左=>37；右=>39；设置按下键盘某个键的值等于code；如果我们改变图片的top和left的值就需要给图片添加绝对定位，否则就不会有效果，然后就可以判断，如果按下键盘编码为37的键也就是我们键盘上的左方向键，图片的left值水平偏移-10px；否则如果按下的是编码为38的键上方向键，图片的top值垂直偏移-10px；否则如果按下的是编码为39的键右方向键，图片的left值水平偏移10px；否则如果按下的是编码为40的键下方向键，图片的top值垂直偏移10px。这样我们就能利用键盘的上下左右键去移动图片，没按一下方向键就移动按下的方向的相应位置10像素

 

 

A0940
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue键盘事件
qq_63533863的博客
01-15 173
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初识vue</title> <!--引入vue--> <script type="text/javascript"src="../js/vue.js"></script> </head> <body> <!--1.
键盘按下事件
chenqiuqian的博客
06-19 948
第一步首先引入jQuery的插件 第二步在script标签里面写一个键盘按下事件，在function后面的括号里面要写一个参数，如果不知道是做什么的可以用console.log()打印一下 $(document).keydown(function(e){...
ASCII码键盘码表
06-23
ASCII键盘码表 只为方便 可以查看参考一下 多多参考一下
vue.js中添加enter键盘事件局部使用和全局使用
qq_44774831的博客
03-30 1438
vue.js中添加enter键盘事件局部使用和全局使用局部使用全局使用 局部使用 原生js和vue的input版 //js <input v-on:keyup.13="onSubmit"> //vue <input @keyup.enter="onSubmit"> 如果失效： //有时候前两种会出现失效，加上 .native 修饰即可 @keyup.enter.native="onSubmit" 示例：(element-ui中具体使用) // 在组件中使用的示例 // 在局部中定
vue中给标签添加键盘事件
业余前端的职业经历
04-01 2366
有的时候用户可能不太想点击触发事件的话就会想着按着键盘上的键进行事件触发。 这个时候也分为俩种情况 1.标签绑定事件 这个需要鼠标提前点击标签聚焦到那个元素上面去 打个比方,我们有的时候想要快进视频的时候,还需要的在视频上点击一下才可以快进是把 这个就是焦点提前聚焦 鼠标先点击下按钮然后按下键盘触发事件这个以回车作为例子 <button @keydown="click"&...
keydown等键盘事件日记
xiangyizhixuexi的博客
06-01 2604
键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。 keydown：按下键盘时触发。 keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。 keyup：松开键盘时触发该事件。 keydown和ke'y ...
键盘事件
weixin_54668937的博客
08-18 6892
键盘事件 开发工具与关键技术： VS、JS 作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 8 月 18日 下面我们来看一下Javascript里的键盘事件， 首先我们要知道键盘事件是什么， 键盘事件就是在我们按下某个键盘按键时电脑会触发其对应的的事件。 下面我们来看一下一些常见的键盘事件： onkeydown：当某个键盘按键被按下时所触发的事件。 如果一直按着不放则会一直触发onkeydown事件， 为了防止误触在onkeydown事件一直被触发时， 第一次和第二次的间隔
js中键盘事件实例简析
12-10
JavaScript中的键盘事件是用于捕获用户在键盘上按下或释放键时发生的事件。这些事件对于创建交互式的网页和应用程序非常有用，例如响应用户的输入或控制游戏。本文将深入解析JavaScript键盘事件及其应用，并针对给定...
javascript中键盘事件用法实例分析
12-11
本文实例分析了javascript中键盘事件用法。分享给大家供大家参考。具体如下： 键盘事件包含onkeydown、onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} [removed] = keyDown; //论按下键盘上的哪个...
案例8键盘录入数据的转换与显示.rar_案例键盘录
09-23
这个名为"案例8键盘录入数据的转换与显示"的压缩包文件显然旨在教导用户如何有效地获取用户输入，对这些数据进行转换，并以适当的形式在屏幕上显示。以下是围绕这个主题的详细知识点： 1. 键盘录入：这是计算机用户...
如何让div span等元素能响应键盘事件操作指南
09-05
但是，在这个特定案例中，由于`contenteditable`属性，事件仍然不会在`span`上触发，因此聚焦方法更为有效。 3. **外层非编辑容器**： 另一种方法是在`span`外再包裹一层`span`，并将其`contenteditable`属性设为`...
Android键盘事件处理例子
02-19
本文将深入探讨Android键盘事件处理，并通过一个实际的案例来讲解相关知识点。 首先，Android中的键盘事件主要分为两种：软键盘（Software Keyboard）事件和硬件键盘（Hardware Keyboard）事件。软键盘通常在触摸屏...
键盘事件是什么？键盘事件包括哪几种？
zy1992As的博客
04-24 1554
需要注意的是，keypress事件保存的按键值是ASCⅡ码，keydown和keyup事件保存的按键值是虚拟键码，keydown和keypress如果按住不放的话，会重复触发该对应事件。每当用户按下键盘上的任何按键时，事件监听器都会被触发，并将按下的键记录在控制台中。第6~8行代码使用键盘事件对象里面的keyCode判断用户按下的是否是s键，如果是，则让搜索框获取焦点，帮助用户进行输入。使用键盘事件，您可以实现各种交互和动态的功能，例如创建键盘快捷键，控制游戏角色的移动，等等。
鼠标事件、键盘事件，你听过嘛？
微风洋洋的博客
03-23 5860
不会还有人没听过键盘事件吧
网页: onkeypress事件与onkeydown事件的区别
酷伊奥
07-19 3393
一、了解区别 1、onkeypress事件：用户在按下并放开键盘上的按钮时所触发的事件，但是键盘上的功能区按钮是无法识别的（例如：F1-F12，箭头，Delete 等等）。 2、onkeydown事件：用户在按下键盘上的按钮时所触发的事件，包括键盘上的功能区按钮（例如：F1-F12，箭头，Delete 等等）。 二、具体的区别 1、onkeypress事件是用户在按下并放开键盘上的按钮时触发，而onkeydown事件是用户在按下但没有放开键盘上的按钮时触发。 2、onkeypress无法识别功能..
el-input限制只能输入数字（开发小记）
Master_Tang的博客
01-05 3715
输入框中限制通常有三种处理方法 第一种：设置type属性（不推荐） 设置type属性为number，text等等，此方法输入框的后面会有不必要样式出现 <el-input type="number"></el-input> 第二种：在属性中添加onkeyup或者oninput进行正则判断 onkeyup，oninput，onchange各有好坏，在这里，推荐onkeyup，在要求不是太高的系统中可以这样使用 <el-input v-model="fo
键盘事件【JS + JAVA】
Zhousan0125的博客
06-05 2006
在处理持续按键事件时，使用KeyEvent对象的getID()方法来检查按键的类型，以确定该事件是按下事件还是释放事件。Java中的键盘事件类KeyEvent包含了大量的常量来表示不同按键的keyCode值，可以通过KeyEvent.VK_*的方式来访问它们。：在处理键盘事件时，可以通过KeyEvent对象的getExtendedKeyCode()方法来获取按键的keyCode值。：当用户按下键盘上的任何键时触发。：对于按下、释放和键入按键时发生的事件，Java提供了三个不同的方法来处理键盘事件。
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 793
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
线程里的run方法实现监听键盘事件案例、
07-12
如果你想在线程中实现监听键盘事件的案例，你可以使用Java的AWT或Swing库来实现。下面是一个简单的示例代码： ```java import java.awt.event.KeyEvent; import java.awt.event.KeyListener; public class KeyboardListener implements KeyListener { @Override public void keyPressed(KeyEvent e) { // 处理按键按下事件 System.out.println("按键按下：" + e.getKeyChar()); } @Override public void keyReleased(KeyEvent e) { // 处理按键释放事件 System.out.println("按键释放：" + e.getKeyChar()); } @Override public void keyTyped(KeyEvent e) { // 处理按键输入事件 System.out.println("按键输入：" + e.getKeyChar()); } } public class MyThread implements Runnable { @Override public void run() { KeyboardListener listener = new KeyboardListener(); // 创建一个JFrame或其他AWT/Swing组件作为事件源 JFrame frame = new JFrame("键盘事件监听"); frame.addKeyListener(listener); // 设置窗口属性并显示 frame.setSize(300, 200); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); // 其他线程逻辑... } } ``` 在这个例子中，我们创建了一个`KeyboardListener`类来实现`KeyListener`接口，用于监听键盘事件。然后，在`MyThread`线程的`run()`方法中，我们创建了一个`JFrame`作为事件源，并将`KeyboardListener`监听器注册到窗口中。 请注意，由于AWT/Swing是基于事件驱动的，因此监听键盘事件的代码需要运行在UI线程上，而不是在后台线程中。因此，在`MyThread`线程中，你需要确保在主线程中创建和显示窗口，以便能够处理键盘事件。 另外，记得在程序结束时，要及时取消注册监听器，以避免内存泄漏： ```java frame.removeKeyListener(listener); ``` 这样，在`MyThread`线程中就可以实现监听键盘事件了。当按下、释放或输入键盘按键时，相应的事件处理方法将被触发，并执行相应的逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值