怎么在vue中實(shí)現(xiàn)一個(gè)回車(chē)鍵登錄功能

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么在vue中實(shí)現(xiàn)一個(gè)回車(chē)鍵登錄功能，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

以上的代碼，在這幾天測(cè)試發(fā)現(xiàn)有一個(gè)問(wèn)題，在登錄進(jìn)系統(tǒng)之后，從首頁(yè)切換到其他界面，點(diǎn)擊回車(chē)，會(huì)導(dǎo)致界面調(diào)整到首頁(yè)！

要實(shí)現(xiàn)：

只在Login界面點(diǎn)擊回車(chē)才執(zhí)行onkeypress方法，其他的點(diǎn)回車(chē)均不觸發(fā)(還不明白為什么在其他界面回車(chē)會(huì)執(zhí)行Login界面的created-_-|| )

思路：

在Login.vue最外層綁定id，再綁定鍵盤(pán)事件。

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

測(cè)試發(fā)現(xiàn)監(jiān)聽(tīng)不到按鍵事件，因?yàn)閐iv元素沒(méi)法獲取焦點(diǎn)，但只要為div元素加上tabIndex屬性就能獲取焦點(diǎn)

<div tabIndex=-1></div>

以上方法雖然也能觸發(fā)keypress，但還有點(diǎn)瑕疵~ 就是打開(kāi)登錄頁(yè)時(shí)，需要鼠標(biāo)點(diǎn)一下界面，才能觸發(fā)keypress?。?！

又一思路：界面中需要有一個(gè)聚焦，在回車(chē)時(shí)才好執(zhí)行keypress。故在界面中加input文本框，讓不管從哪里打開(kāi)或跳到Login.vue都聚焦文本框

所以自定義指令：

 <div id="loginDiv" tabindex="1"  >
 <input type="text" v-focus >
</div>

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

自定義指令及inserted用法截圖自vue官網(wǎng)文檔如下：

知識(shí)點(diǎn)補(bǔ)充：

vue項(xiàng)目里登錄界面實(shí)現(xiàn)回車(chē)登錄

方法一：

在vue的created鉤子函數(shù)中寫(xiě)

 //登錄添加鍵盤(pán)事件,注意,不能直接在焦點(diǎn)事件上添加回車(chē)
 // let that = this;
 // document.onkeydown = function (e) {
 //  e = window.event || e;
 // if(that.$route.path=='/login'&&(e.code=='Enter'||e.code=='Num Enter')){//驗(yàn)證在登錄界面和按得鍵是回車(chē)鍵enter
 //  that.handleSubmit2('ruleForm2');//登錄函數(shù) （handleSubmit2('ruleForm2')-登錄按鈕的點(diǎn)擊事件）
 // }
 // }

注意：只對(duì)主鍵盤(pán)的Enter管用

方法二：

在vue的created鉤子函數(shù)中寫(xiě)

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

上述就是小編為大家分享的怎么在vue中實(shí)現(xiàn)一個(gè)回車(chē)鍵登錄功能了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。