vue：添加enter事件，键盘敲下enter事件

#vue：添加enter事件，键盘敲下enter事件| 来源: 网络整理| 查看: 265

vue项目中遇到点击查询按钮可以查出数据，点击回车键也能查出数据，所以就想点击回车键时调用查询方法。

示例代码如下：

一、第一步：给input按钮绑定@keyup.enter；如果是要对页面的button添加enter键盘事件，就不能写在input或者button上，因为获取不到焦点，这时候可以直接写在created或者mounted里，直接绑定在document上。

查询

二、第二步：浏览器url：event.target.baseURI; 获取浏览器的路径地址

// 创建时 created(){ this.enterEvent()//页面在创建时就调用键盘的回车事件，在结构代码中也可以不写@keyup.enter.native="handleAddBook" }, methods:{ enterEvent(){ document.onkeydown = e =>{ let body = document.getElementsByTagName('body')[0] if (e.keyCode === 13 && e.target.baseURI.match(/inputbook/) && e.target === body) { // match(此处应填写文件在浏览器中的地址，如 '/home/index')，不写的话，其他页面也会有调用回车按下的方法 console.log('enter'); this.handleAddBook(); //调用查询方法 } } }, handleAddBook(){ console.log('查询'); } } vue监听键盘回车事件:

vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符：！！！使用 keyCode attribute 也是允许的：不过已经被淘汰了了解一下就行了。

vue还非常贴心地给出了常用按键的别名，这样就不必去记keyCode ~ ~

上面代码，还可以在这样写：

注意！！！如果用了封装组件的话，比如elementUi，这个时候使用按键修饰符需要加上.native

比如：

其它：

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter .tab .delete（捕获删除或者“退格键”） .esc .space .up .down .left .right

有一些按键（.esc以及所有的方向键）在IE9中有不同的key值，如果你想支持IE9，这些内置的别名应该是首选：还可以通过参考config.keyCodes对象自定义按键修饰符别名

其他参照文档

可能会出现的bug：键盘回车事件导致页面刷新的问题

先在form表单加上@submit.prevent.native ，然后在所需要操作的input加上@keyup.enter.native和onsubmit="false" 即可。

【本文地址】

公司简介

联系我们