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+iview实现分页及查询功能
Nov 17 Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
js charAt的使用示例
2014/02/18 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
执行Python程序时模块报错问题
2020/03/26 Python
大学生自我推荐信范文
2015/03/24 职场文书
讲座通知范文
2015/04/23 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
个人合作协议范本
2015/08/06 职场文书
redis中lua脚本使用教程
2021/11/01 Redis
MySQL实现配置主从复制项目实践
2022/03/31 MySQL
java版 联机五子棋游戏
2022/05/04 Java/Android