Vue2中的鍵盤事件
阿新 • • 發佈：2018-11-12
在HTML中的鍵盤事件有：
1.onkeyup 事件會在鍵盤按鍵被鬆開時發生。
2.onkeydown 事件會在使用者按下一個鍵盤按鍵時發生。
3.onkeypress 事件會在鍵盤按鍵被按下並釋放一個鍵時發生。
那麼在Vue2中我們該如何實現鍵盤事件呢？
Vue2鍵盤事件：keydown/keyup...
下面用一個列子說明如何使用：
HTML程式碼：
<div id="box">
<input type="text" placeholder="請輸入" @keyup="show($event)">
<input type="text" placeholder="請輸入" @keyup.13="show($event)">
</div>
JavaScript程式碼：
var vm = new Vue({
el:'#box',
methods:{
show:function(event){
if(event.keyCode == 13){
alert('你按回車鍵了');
}
},
}
});
當按下鍵盤的時候，執行show方法，然後再去執行相應的業務。
上面兩個按鈕的效果是一樣的，因為回車鍵（Enter）的鍵盤程式碼是13
關於鍵盤值，可以檢視 詳細的鍵盤鍵值表
這裡列舉一些常用的鍵盤事件：
@keyup.13 回車
@keyup.enter 回車
@keyup.left 左鍵
@keyup.right 右鍵
@keyup.up 上鍵
@keyup.down 下鍵
@keyup.delete 刪除鍵