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 19 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
python编写爬虫小程序
2015/05/14 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
会计实习生自我鉴定
2013/12/12 职场文书
护理专科自荐书范文
2014/02/18 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
体育馆的标语
2014/06/24 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
纪委立案决定书
2015/06/24 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
详解Python描述符的工作原理
2021/06/11 Python
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers