键盘事件小案例

最新推荐文章于 2022-05-20 17:04:56 发布
最新推荐文章于 2022-05-20 17:04:56 发布
阅读量122 收藏 1
点赞数
文章标签： visual studio code
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CWHcwh123456/article/details/124254537
版权

键盘事件小案例

首先准备好一个张图片

然后在script标签里面获取到这张图片

为整个文档绑定键盘按下事件，传入一个事件对象

并且兼容IE8及以下的浏览器


写一个switch语句，通过事件对象找到键盘上的键盘码

判断当前键盘按下的是哪个键从而实现上下左右操作图片

通过打印可以知道上下左右的键盘码：左37、上38、右39下40.

在实现功能之前需要给图片设置一个样式，给图片设置绝对定位

然后判断键盘按下哪个键时图片向那边偏移。

效果展示：

以上就是键盘事件小案例的代码了

CWHcwh123456
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
模拟京东快递单号查询案例2020/11/24
weixin_50286102的博客
11-24 641
模拟京东快递单号查询案例 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大） 表单检测用户输入： 给表单添加键盘事件 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
js-键盘事件案例-小人快跑
qq_25503949的博客
04-26 750
js-键盘事件案例-小人快跑 案例思路： 利用键盘的keycode判断按了上下左右什么键，然后利用键盘事件onkeydown对小人的定位进行改变即可 css部分： 由于操纵的是小人的位置，所以我们要先给小人添加一个定位 <style> #imgs { position: absolute; left: 500px; top: 20...
键盘事件案例
A0940的博客
04-17 354
首先引入我们图片并设置id名，用通配符去掉默认的外边距属性。获取到图片id，然后监听键盘事件，当键盘的某个按键按下时，设置事件对象兼容，为了兼容IE8以下的浏览器，再获取到上下左右的键盘码，分别是上=>38；下=>40；左=>37；右=>39；设置按下键盘某个键的值等于code；如果我们改变图片的top和left的值就需要给图片添加绝对定位，否则就不会有效果，然后就可以判断，如果按下键盘编码为37的键也就是我们键盘上的左方向键，图片的left值水平偏移-10px；否则如果按下的是编码
js中键盘事件实例简析
12-10
本文实例分析了js中键盘事件。分享给大家供大家参考。具体分析如下： 该实例效果： 按键盘上的任意一个键，弹出相应的ASCII码，兼容ie，chrome和firefox。 但还是有不少问题： （1）ie和chrome中，一些键没有效果，如上、下、左、右等； （2）而firefox中的向右键，与单引号键，都为39。 具体代码如下： 代码如下:<html> <head> [removed]  [removed] = function(){   var bd = document.getElementsByTagName(‘body’)[0];  
键盘按下事件
娓娓道来
08-06 4531
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <script> //页面的任何的位置.按下键盘,获取按键的值 docum...
C# 虚拟数字小键盘
03-18
总的来说，"C# 虚拟数字小键盘"项目涉及到C#语言、GUI设计、事件处理、数字验证等多个IT知识点，对于想要学习或提升这些技能的开发者来说，是一个很好的实践案例。通过深入理解和分析该项目的源代码，开发者不仅可以...
javascript中键盘事件用法实例分析
12-11
本文实例分析了javascript中键盘事件用法。分享给大家供大家参考。具体如下： 键盘事件包含onkeydown、onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} [removed] = keyDown; //论按下键盘上的哪个...
如何让div span等元素能响应键盘事件操作指南
09-05
但是，在这个特定案例中，由于`contenteditable`属性，事件仍然不会在`span`上触发，因此聚焦方法更为有效。 3. **外层非编辑容器**： 另一种方法是在`span`外再包裹一层`span`，并将其`contenteditable`属性设为`...
案例8键盘录入数据的转换与显示.rar_案例键盘录
09-23
这个名为"案例8键盘录入数据的转换与显示"的压缩包文件显然旨在教导用户如何有效地获取用户输入，对这些数据进行转换，并以适当的形式在屏幕上显示。以下是围绕这个主题的详细知识点： 1. 键盘录入：这是计算机用户...
JavaScript键盘事件经典案例
abraham_ly的博客
11-25 1229
JavaScript键盘事件五大经典案例 目录：JavaScript键盘事件五大经典案例1、什么是键盘事件2、常用键盘事件3、常用属性和方法4、案例4.1 京东搜索框4.2 快递单号输入查询4.3 文字禁止选中4.4 禁止右击菜单4.5 自定义鼠标光标 1、什么是键盘事件 ​ 键盘事件就是我们对键盘的操作触发绑定元素对象的相关函数，比如敲击键盘上的某个键，按住键盘上的某个键，按组合快捷键后元素做出的函数行为……等这些都是键盘事件的体现。 2、常用键盘事件 事件 说明 onkeydown
Event事件学习实用路线（9）——Event事件之键盘事件——案例：键盘操作元素位置——案例：键盘事件组合键控制
xiao廸要飞
04-25 827
Event事件之键盘事件键盘事件keydown、keyup键盘事件-事件对象event.keyCode、event.keyevent.ctrlKey、event.altKey、event.shiftKey 键盘事件 keydown、keyup 这两事件没太多好说的，非常简单，大家看代码即可掌握了。 document.addEventListener("keydown",...
鼠标事件 键盘事件
m0_61700036的博客
12-03 1510
一、常用的鼠标事件 鼠标事件 触发条件 onclick onmouseover onmouseoutonfocus onblur onblur onmousemove onmouseup onmousedown
js的键盘事件
zhangjing1019的博客
01-11 1345
$(document).keypress(function (e) { if($('#memberReception').css('display') == 'block'){ if (e.keyCode == 13){ //此处写代码 }
HTML：用键盘实现元素的方向移动
qq_51874203的博客
05-20 2093
案例:div的方向移动 body部分： <div id="ok">✈</div> style样式：自己设置大小灯样式，其中最重要的是要元素脱离文档流---不占页面位置了，其下也可以放其他元素。 #ok {position: absolute; } 补absolute：它的参照物是最近使用了定位的父级，如果没有找body。 此案例中div id="ok"的父级就是body。 首先：我们需要知道怎样将键盘中的按键与元素/对象相联系，能控制它。 这就是JS键盘事件
js-键盘事件案例-飞机发射子弹
热门推荐
qq_25503949的博客
04-27 3万+
js-键盘事件案例-飞机发射子弹 一.先对飞机进行研究： css部分 改变飞机的位置，所以要加定位 <style> #img{ position:absolute; left:0px; top:0px; } </style> html部分 （images/1.gif为飞机图片） <body> ...
java入门教程-10.14Java键盘事件
芝麻软件工作室的专栏
05-28 1487
键盘事件的事件源一般丐组件相关，当一个组件处于激活状态时，按下、释放或敲击键盘上的某个键时就会发生键盘事件。键盘事件的接口是KeyListener，注册键盘事件监视器的方法是addKeyListener(监视器)。实现KeyListener接口有3个： keyPressed(KeyEvent e)：键盘上某个键被按下；keyReleased(KeyEvent e)：键盘上某个键被按下，又释放
JS之键盘事件案例（重要）
weixin_47409897的博客
12-22 575
事件对象案例下拉菜单HTNLCSSJS拖拽回放htmlcssjs移动表格htmlcssjs换肤效果htmlcssjs 下拉菜单 需求： 【1】搜索框获取焦点的时候 显示下拉下单 + 【1】获取元素 【2】搜索框失去焦点时候 隐藏下拉菜单 这两个功能只有在获取焦点的时候才会有用 【3】按下鼠标的上下键 可以动态选中 li元素（给li元素添加 active 这个class名） 【4】当按下 enter键的时候，把拥有 activeclass名的元素的内容 赋值给搜索框 HTNL <div class
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件
xuehyunyu的博客
07-25 1万+
示例代码： HTML文件： HTML文件 window.onload=function () { var d=document.getElementById('d'); //内容发生改变，并焦点发生改变，才可以监听到 d.onchange=function () {
java 键盘事件处理案例
u010885095的专栏
12-18 1419
/*  *要求：  *  *在文本框中，输入键盘上的各个按键，  *在文本域中显示用户按下的是什么键，并输入这个按键的ASCII码。  */ import javax.swing.*; import java.awt.*; import java.awt.event.*; class MouseKey { private JFrame frame; private JLab
Java实现全局焦点的键盘事件的案例
最新发布
03-11
可以使用Java的AWT和Swing库来实现全局焦点的键盘事件。具体实现方法可以参考以下代码： ``` import java.awt.*; import java.awt.event.*; import javax.swing.*; public class GlobalKeyListener implements ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值