vue中回車鍵登錄

created() {
    let that = this;
    document.onkeypress = function(e) {
      var keycode = document.all ? event.keyCode : e.which;
      if (keycode == 13) {
        that.login();// 登錄方法名
         return false;
      }
    };
  }

 以上的代碼，在這幾天測試發現有一個問題，在登錄進系統之后，從首頁切換到其他界面，點擊回車，會導致界面調整到首頁！

要實現：只在Login界面點擊回車才執行onkeypress方法，其他的點回車均不觸發(還不明白為什么在其他界面回車會執行Login界面的created-_-|| )

思路：在Login.vue最外層綁定id，再綁定鍵盤事件。 

$(“#loginDiv”).bind("keypress",toLogin);

測試發現監聽不到按鍵事件，因為div元素沒法獲取焦點，但只要為div元素加上tabIndex屬性就能獲取焦點

<div id="loginDiv" tabIndex=-1></div>

以上方法雖然也能觸發keypress，但還有點瑕疵~ 就是打開登錄頁時，需要鼠標點一下界面，才能觸發keypress！！！

又一思路：界面中需要有一個聚焦，在回車時才好執行keypress。故在界面中加input文本框，讓不管從哪里打開或跳到Login.vue都聚焦文本框

所以自定義指令：

 

 <div id="loginDiv" tabindex="1" style="outline:0;" >
    <input type="text" v-focus style="opacity:0;position:absolute;">
</div>

 

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
},

 自定義指令及inserted用法截圖自vue官網文檔如下：

 

 

 

 

解決方法參考自：

https://blog.csdn.net/zh1159007904/article/details/78026517

https://www.cnblogs.com/hjj2ldq/p/7831972.html