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+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
Vue router配置与使用分析讲解
Dec 24 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 adodb介绍
2009/03/19 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
python中hashlib模块用法示例
2017/10/30 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
优秀技术工人先进材料
2014/02/17 职场文书
2015年党小组工作总结
2015/05/26 职场文书
村主任当选感言
2015/08/01 职场文书