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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
el-table-column 内容不自动换行的解决方法
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
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
php中异常处理方法小结
2015/01/09 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
PHP实现微信提现功能
2018/09/30 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
js打造数组转json函数
2015/01/14 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
详解Django框架中用context来解析模板的方法
2015/07/20 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
python如何读写json数据
2018/03/21 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
python3跳出一个循环的实例操作
2020/08/18 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
化工专业个人的求职信范文
2013/11/28 职场文书
小学生获奖感言范文
2014/02/02 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书