Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件
- 键盘事件
- 在vue项目中监听键盘事件--keydown
- 键盘常用键的keyCode值
键盘事件
在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘事件主要包括下面 3 种类型:
keydown:在键盘上按下某个键时触发。如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符,在 IE 和 Safari 浏览器下还会禁止keypress 事件响应)。
keypress:按下某个键盘键并释放时触发。如果按住某个键,会不断触发该事件。该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符)。
keyup:释放某个键盘键时触发。该事件仅在松开键盘时触发一次,不是一个持续的响应状态。
当获取用户正按下键码时,可以使用 keydown、keypress 和 keyup 事件获取这些信息。其中 keydown 和 keypress 事件基本上是同义事件,它们的表现也完全一致,不过一些浏览器不允许使用 keypress 事件获取按键信息。所有元素都支持键盘事件,但键盘事件多被应用在表单输入中。
在vue项目中监听键盘事件–keydown
1、在main.js文件中加入
Vue.prototype.$keyBoard = function(vm) {document.onkeydown = function() {let key = window.event.keyCode;//keyCode键盘码值//当按下键盘1时,执行有参函数keydown(1, 0),这里的函数keydown按自己的需求更改if (key == 49) { //1 ->键盘按键 1vm.keydown(1, 0);//keydown是自定义方法。按键触发}if (key == 50) { //2 ->键盘按键 2vm.keydown(2, 1);}
2、在需要监听键盘事件的组件里的mounted 生命周期内写入:
mounted() {this.$keyBoard(this);
}
3、在组件中定义被键盘事件触发的方法:
methods: {//测试方法:
keydown(num, index) {alert('111');console.log(num);console.log(index);},
}
键盘常用键的keyCode值
键位 | keyCode |
---|---|
0-9 | 48-57 |
a到z(A到Z) | 65到90 |
F1到F24 | 112到135 |
BackSpace(退格) | 8 |
Tab | 9 |
Enter(回车) | 13 |
Caps_Lock(大写锁定) | 20 |
Space(空格键) | 32 |
Left(左箭头) | 37 |
Up(上箭头) | 38 |
Right(右箭头) | 39 |
Down(下箭头) | 40 |
Vue中键盘快捷键-JS键盘事件相关推荐
- 在vue中使用three.js
vue中使用three.js vue 安装: npm install --save three 在要使用的页面中引入three.js import * as Three from 'three' 参考 ...
- vue中父元素点击事件与子元素点击事件冲突
vue中父元素点击事件与子元素点击事件冲突 在做vue项目的时候,遇到子元素有点击事件,父元素也有点击事件,当点击子元素时往往触发的是父元素的点击事件,产生冲突,怎样解决这个问题呢?这就用到vue事件 ...
- 机械革命z2黑苹果改造计划第三番-macOS键盘快捷键Win键盘适配
macOS键盘快捷键&Win键盘适配 键盘区别 首先下图是苹果妙控键盘无指纹版,官网售价699,穷学生的我是真的买不起 然后下图是我正在使用的机械键盘ikbc w200 87键版本 可以看出两 ...
- vue中使用raphael.js实现地图绘制
一.效果图 二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 1 <template> 2 <div> ...
- html 全景图three,vue中利用three.js实现全景图的完整示例
粗暴一点,直接上代码: 第一步: 通过指令下载three.js npm install three -S 第二步: 在组件中引用 import * as THREE from 'three' 第三步: ...
- vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
- vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mous ...
- vue中解决three.js出现内存泄漏丢失上下文问题
vue中解决three.js出现内存泄漏丢失上下文问题 参考文章: (1)vue中解决three.js出现内存泄漏丢失上下文问题 (2)https://www.cnblogs.com/lichuank ...
最新文章
- 我自己可以挖矿了!使用Ethereum C++客户端Aleth建一个私有网络,并使用Remix部署一个智能合约
- 表字段注释放在哪_橱柜台面6种材质优缺点大解剖,我来测评,告诉你哪一种适合你!...
- hbase 查询_云HBase发布全文索引服务,轻松应对复杂查询
- linux 分区个数限制,Linux分区个数限制[转载]
- IP地这和子网的划分
- 计算机网络 第三章 数据链路层
- vue 随机显示数组的其中一个_两个显示器组建双屏其中一个屏幕出现重影解决方法...
- 手把手教你写个ORM(一)
- getset原子性 redis_RedisAPI原子性操作及原理解析
- 《CDN技术详解》 - CDN知多少?
- 用python演绎神奇的生命游戏,在游戏中学习numpy和matplotlib动画
- 好的示波器可以显示正常的方波,自己制作示波器只有正弦波
- Python数据处理016:Pandas 导入导出
- 扫码支付java,详解JAVA后端实现统一扫码支付:微信篇
- 通过Google+设置壁纸报错
- Java SE 小白学习笔记 周周测 从小白到大牛
- 车辆动力学从入门到进阶之路(传统篇)
- 解决No EntityManager with actual transaction available for current thread
- 如何选择一台高性能计算机,【小白必看】如何选购电脑?
- eNSP:RIP实验
热门文章
- 德鲁克:激发我一生的七段经历
- Linux(Centos)安全加固方案总结
- javafx音乐播放器----歌词同步实时显示(包含获取酷我歌词方式,歌词同步方法)
- gif加字php,『GIF图片添加文字』如何在gif上添加文字 仍然保持gif动态效果
- 微信小程序 wxss(css)样式的学习
- windows中ncdu替代者TreeSize
- 9秒学院Html5游戏:一场可预见的疯狂
- 新手做跨境,到底应不应该选择虾扑erp?
- IDEA 中内容辅助键和快捷键
- Jetson Nano (Cuda10.2)安装tensorflow2.1.0运行python程序及几个版本tensorflow aarch64下载分享