vue.js監聽鍵盤事件

Vue監聽鍵盤，直接用@綁定就可以，而且Vue為幾個常用的按鍵提供了別名，不用去查詢按鍵的keyCode

全部的按鍵別名

        .enter

        .tab

      

##        .space

##        .up

        .down 

##一、 input標籤綁定esc鍵

中綁定事件

<input type="text" @keyup.esc="KeyUpEsc">

<script></script>中定義事件

KeyUpEsc:function(){
      alert("监听到esc键")
  }

功能效果圖

#二、使用element元件庫的el-input標籤，綁定delete鍵

中綁定事件

<el-input v-model="input" placeholder="请输入内容" @keyup.delete.native="KeyUpDelete"></el-input>

為什麼這次綁定事件多一個.native修飾符，這個可能是因為element-ui封裝了個div在input標籤外面，把原來的事件隱藏了，所以如果不加.native的話，按鍵不會生效

<script></script>中定義事件

 KeyUpDelete :function(){
      alert("监听到delete键")
  },

三、上面兩種實作效果是當input標籤取得到焦點的時候，才能監聽到鍵盤，下面這種是全域監聽enter鍵，是把監聽事件綁定到document上（登入頁面常用）

 created: function() {
        var _this = this;
        document.onkeydown = function(e) {
            let key = window.event.keyCode;
            if (key == 13) {
                _this.submit();
            }
        };
    },

   methods: {
        submit: function() {
            alert("监听到enter键");
        },
   }

效果圖如圖所示

了解更多js相關知識可以點我：

js教學

以上是vue.js監聽鍵盤事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！