vue.js 键盘enter事件的使用

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

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> <input v-on:keyup.13="submit">

记住全部的 keyCode 比较困难，因此 Vue 为最经常使用的按键提供了别名：

<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">

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

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

---

<template>
<div class="form-inline col-sm-12">

// 错误写法：这么写没有生效
<input class="form-control search-input" type="search" placeholder="输入用户名进行搜索" aria-label="Search" maxlength="32" v-model.trim="search_value" @keyup.enter="enterSearchMember">

<button class="btn btn-primary btn-sch" type="button" @click="goSearch">搜索</button>
</div>
</template>
<script>
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()
}
}
}
</script>

---

补充一个问题：

当咱们对input添加enter键盘事件后，点击enter页面会刷新，多是由于你把input写在了form里，form会自动提交一次，页面就是一个刷新的效果，这样体验并很差

解决办法：

一、去掉form

二、若是非得用表单，只要不让表单里有且只有一个文本框就OK了

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

---

vue所有的按键别名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right