vue监听键盘事件的相关总结


Posted in Vue.js onJanuary 29, 2021

按键修饰符

在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input v-on:keyup.page-down="onPageDown">

为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:

  • - enter 
  • - tab 
  • - delete (捕获“删除”和“退格”键) 
  • - esc 
  • - space 
  • - up 
  • - down 
  • - left 
  • - right

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名: 

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 

  • - .ctrl 
  • - .alt 
  • - .shift 
  • - .meta

Do something
与按键别名不同的是,修饰键和 keyup 事件一起用时,事件引发时必须按下正常的按键。换一种说法:如果要引发 keyup.ctrl,必须按下 ctrl 时释放其他的按键;单单释放 ctrl 不会引发事件。

<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
 
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other"><!-- 按下Ctrl + enter时触发 --><input @keydown.ctrl.13="submit">

对于elementUI的input,我们需要在后面加上.native, 因为elementUI对input进行了封装,原生的事件不起作用。

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">

<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

.exact修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。 

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标按钮修饰符

  • .left 
  • .right 
  • .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。 

系统按键组合

如果我们要监听全局的按键操作方法,显然,将其绑定在页面元素上是不行的。

我们可在mounted里面监听:

mounted() {
  document.onkeydown = function (event) {
    let key = window.event.keyCode;
    if (key === 65 && event.ctrlKey) { 
      // 监听ctrl+A组合键      
      window.event.preventDefault(); //关闭浏览器默认快捷键      
      console.log('crtl+ a组合键')    
    } else if(key === 83 && event.ctrlKey) {       
      window.event.preventDefault(); //关闭浏览器快捷键
      console.log('保存');
    }
  }
}

从以上例子可以看出,shift、Control、Alt 在JS中也可用“window.event.shiftKey”、“window.event.ctrlKey”、“window.event.altKey” 代替。

附录-键盘按钮keyCode表

vue监听键盘事件的相关总结

vue监听键盘事件的相关总结

以上就是vue监听键盘事件的相关总结的详细内容,更多关于vue监听键盘事件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 #Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 #Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 #Vue.js
聊聊vue 中的v-on参数问题
Jan 29 #Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 #Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 #Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 #Vue.js
You might like
数据库的日期格式转换
2006/10/09 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python实现读取并显示图片的两种方法
2017/01/13 Python
Python logging模块用法示例
2018/08/28 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
python链表类中获取元素实例方法
2021/02/23 Python
html5时钟实现代码
2010/10/22 HTML / CSS
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
接口可以包含哪些成员
2012/09/30 面试题
二年级数学教学反思
2014/01/21 职场文书
寄语十八大感言
2014/02/07 职场文书
新年寄语大全
2014/04/12 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书