vue中實現(xiàn)回車鍵登錄功能
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)之后，從首頁切換到其他界面，點擊回車，會導(dǎo)致界面調(diào)整到首頁！
要實現(xiàn)：
只在Login界面點擊回車才執(zhí)行onkeypress方法，其他的點回車均不觸發(fā)(還不明白為什么在其他界面回車會執(zhí)行Login界面的created-_-|| )
思路：
在Login.vue最外層綁定id，再綁定鍵盤事件。
$(“#loginDiv”).bind("keypress",toLogin);
測試發(fā)現(xiàn)監(jiān)聽不到按鍵事件，因為div元素沒法獲取焦點，但只要為div元素加上tabIndex屬性就能獲取焦點
<div tabIndex=-1></div>
以上方法雖然也能觸發(fā)keypress，但還有點瑕疵~ 就是打開登錄頁時，需要鼠標(biāo)點一下界面，才能觸發(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)文檔如下：
知識點補(bǔ)充：
vue項目里登錄界面實現(xiàn)回車登錄
方法一：
在vue的created鉤子函數(shù)中寫
//登錄添加鍵盤事件,注意,不能直接在焦點事件上添加回車
// 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')-登錄按鈕的點擊事件）
// }
// }
注意：只對主鍵盤的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中實現(xiàn)回車鍵登錄功能，希望對大家有所幫助，也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue3.0運行npm run dev報錯Cannot find module&
本文主要介紹了vue3.0運行npm run dev報錯Cannot find module node:url,因為使用的node版本是14.15.1低于15.0.0導(dǎo)致,具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了Vue3.0版本強(qiáng)勢升級點特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2022-06-06
在Vue中進(jìn)行數(shù)據(jù)分頁的實現(xiàn)方法
在前端開發(fā)中,數(shù)據(jù)分頁是一個常見的需求,特別是當(dāng)處理大量數(shù)據(jù)時,Vue作為一款流行的JavaScript框架,提供了強(qiáng)大的工具和生態(tài)系統(tǒng)來實現(xiàn)數(shù)據(jù)分頁,本文將介紹如何在Vue中進(jìn)行數(shù)據(jù)分頁,以及如何設(shè)計一個通用的分頁組件,需要的朋友可以參考下2023-10-10
指令是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位,通過實例代碼介紹了對輸入手機(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
防抖和節(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)簽通用指令校驗的實現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)垂直無限滑動日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04