vue监听键盘enter_vue.js 键盘enter事件的使用

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

在使用过程中，如果页面只针对一个Input添加键盘enter事件，可以直接按照官方文档定义的别名增加相应事件就可以了

但是如果是要对页面的button添加enter键盘事件，就不能写在input或者button上，因为获取不到焦点，这时候可以直接写在created里，如下：

// 错误写法：这么写没有生效

搜索

export default {

name: 'searchMember',

data() {

return {

search_value: ''

}

},

//不能直接将事件添加写在input上，因为这样必须焦点在input上才能触发，所以可以直接绑定在document上即可

created() {

var lett = this;

document.onkeydown = function(e) {

var key = window.event.keyCode;

if (key == 13) {

lett.enterSearchMember();

}

}

},

methods: {

goSearch: function() {

let search_nick = this.search_value;

if (search_nick !== 0) {

this.$emit('searchMember', search_nick)

}

},

enterSearchMember() {

this.goSearch()

}

}

}

补充一个问题：

当我们对input添加enter键盘事件后，点击enter页面会刷新，可能是因为你把input写在了form里，form会自动提交一次，页面就是一个刷新的效果，这样体验并不好

解决办法：

1、去掉form

2、如果非得用表单，只要不让表单里有且只有一个文本框就OK了

3、在表单 form 后面加上一个 onsubmit 事件，返回 false，来阻止 form 提交

vue全部的按键别名：

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right