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 $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue实现简易音乐播放器
Aug 14 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
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
Python os模块学习笔记
2015/06/21 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python分布式计算dispy的使用详解
2019/12/22 Python
Python常用数据分析模块原理解析
2020/07/20 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
迎新晚会策划方案
2014/06/13 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
体育个人工作总结
2015/02/09 职场文书
实名检举信范文
2015/03/02 职场文书
给学校的建议书400字
2015/09/14 职场文书
2016新年晚会开场白
2015/12/03 职场文书
《颐和园》教学反思
2016/02/19 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js
Nginx如何配置根据路径转发详解
2022/07/23 Servers