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 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官網文件如下：

知識點補充：

vue專案裡登入介面實現回車登入

方法一：

在vue的created鉤子函式中寫

 //登入新增鍵盤事件,注意,不能直接在焦點事件上添加回車
 // let that = this;
 // document.onkeydown = function (e) {
 //  e = window.event || e;
 // if(that.$route.path=='/login'&&(e.code=='Enter'||e.code=='Num Enter')){//驗證在登入介面和按得鍵是回車鍵enter
 //  that.handleSubmit2('ruleForm2');//登入函式 （handleSubmit2('ruleForm2')-登入按鈕的點選事件）
 // }
 // }

注意：只對主鍵盤的Enter管用

方法二：

在vue的created鉤子函式中寫

 var _self = this;
  document.onkeydown = function(e){
  var key = window.event.keyCode;
  if(key == 13 || key == 100){
   _self.handleSubmit2('ruleForm2');
  }
 }

對主鍵盤和小鍵盤的Enter都管用

總結

以上所述是小編給大家介紹的vue中實現回車鍵登入功能，希望對大家有所幫助，也非常感謝大家對我們網站的支援！