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