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防抖与节流
Nov 24 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
Vue深入理解插槽slot的使用
Aug 05 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
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
jQuery动态添加
2016/04/07 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python实现维吉尼亚加密法
2019/03/20 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python 获取等间隔的数组实例
2019/07/04 Python
Python中的Cookie模块如何使用
2020/06/04 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
学校七一活动方案
2014/01/19 职场文书
小学五年级学生评语
2014/04/22 职场文书
触电现场处置方案
2014/05/14 职场文书
代收款委托书范本
2014/10/01 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书