vue中實(shí)現(xiàn)回車鍵登錄功能

更新時間：2020年02月19日 11:20:29 作者：蝸牛

這篇文章主要介紹了vue中實(shí)現(xiàn)回車鍵登錄功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下

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

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

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

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

思路：

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

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

測試發(fā)現(xiàn)監(jiān)聽不到按鍵事件，因為div元素沒法獲取焦點(diǎn)，但只要為div元素加上tabIndex屬性就能獲取焦點(diǎn)

<div tabIndex=-1></div>

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

又一思路：界面中需要有一個聚焦，在回車時才好執(zhí)行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官網(wǎng)文檔如下：

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

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

方法一：

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

 //登錄添加鍵盤事件,注意,不能直接在焦點(diǎn)事件上添加回車
 // 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');//登錄函數(shù) （handleSubmit2('ruleForm2')-登錄按鈕的點(diǎn)擊事件）
 // }
 // }

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

方法二：

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

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

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

總結(jié)

以上所述是小編給大家介紹的vue中實(shí)現(xiàn)回車鍵登錄功能，希望對大家有所幫助，也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue3.0運(yùn)行npm run dev報錯Cannot find module&
本文主要介紹了vue3.0運(yùn)行npm run dev報錯Cannot find module node:url,因為使用的node版本是14.15.1低于15.0.0導(dǎo)致,具有一定的參考價值,感興趣的可以了解一下
2023-10-10
Vue3.0版本強(qiáng)勢升級點(diǎn)特性詳解
這篇文章主要介紹了Vue3.0版本強(qiáng)勢升級點(diǎn)特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2022-06-06
在Vue中進(jìn)行數(shù)據(jù)分頁的實(shí)現(xiàn)方法
在前端開發(fā)中,數(shù)據(jù)分頁是一個常見的需求,特別是當(dāng)處理大量數(shù)據(jù)時,Vue作為一款流行的JavaScript框架,提供了強(qiáng)大的工具和生態(tài)系統(tǒng)來實(shí)現(xiàn)數(shù)據(jù)分頁,本文將介紹如何在Vue中進(jìn)行數(shù)據(jù)分頁,以及如何設(shè)計一個通用的分頁組件,需要的朋友可以參考下
2023-10-10
vue內(nèi)置指令詳解
指令是Vue模板中最常用的一項功能，它帶有前綴v-，主要職責(zé)是當(dāng)其表達(dá)式的值改變時，相應(yīng)的將某些行為應(yīng)用在 DOM 上。這篇文章主要介紹了vue內(nèi)置指令詳解,需要的朋友可以參考下
2018-04-04
Vue+elementUI?el-input輸入框手機(jī)號校驗功能
這篇文章主要介紹了Vue+elementUI?el-input輸入框手機(jī)號校驗功能,限制input框內(nèi)只能輸入數(shù)字,且為11位,通過實(shí)例代碼介紹了對輸入手機(jī)號做校驗的方法,感興趣的朋友跟隨小編一起看看吧
2023-10-10
vue3-vue-router創(chuàng)建靜態(tài)路由和動態(tài)路由方式
這篇文章主要介紹了vue3-vue-router創(chuàng)建靜態(tài)路由和動態(tài)路由方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue使用節(jié)流函數(shù)的踩坑實(shí)例指南
防抖和節(jié)流的目的都是為了減少不必要的計算，下面這篇文章主要給大家介紹了關(guān)于vue使用節(jié)流函數(shù)踩坑的相關(guān)資料,需要的朋友可以參考下
2021-05-05
vue再次進(jìn)入頁面不會再次調(diào)用接口請求問題
這篇文章主要介紹了vue再次進(jìn)入頁面不會再次調(diào)用接口請求問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue input標(biāo)簽通用指令校驗的實(shí)現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
vue實(shí)現(xiàn)垂直無限滑動日歷組件
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)垂直無限滑動日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04