vue中實(shí)現(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;
}
};
}
以上的代碼，在這幾天測(cè)試發(fā)現(xiàn)有一個(gè)問(wèn)題，在登錄進(jìn)系統(tǒng)之后，從首頁(yè)切換到其他界面，點(diǎn)擊回車，會(huì)導(dǎo)致界面調(diào)整到首頁(yè)！
要實(shí)現(xiàn)：
只在Login界面點(diǎn)擊回車才執(zhí)行onkeypress方法，其他的點(diǎn)回車均不觸發(fā)(還不明白為什么在其他界面回車會(huì)執(zhí)行Login界面的created-_-|| )
思路：
在Login.vue最外層綁定id，再綁定鍵盤事件。
$(“#loginDiv”).bind("keypress",toLogin);
測(cè)試發(fā)現(xiàn)監(jiān)聽不到按鍵事件，因?yàn)閐iv元素沒(méi)法獲取焦點(diǎn)，但只要為div元素加上tabIndex屬性就能獲取焦點(diǎn)
<div tabIndex=-1></div>
以上方法雖然也能觸發(fā)keypress，但還有點(diǎn)瑕疵~ 就是打開登錄頁(yè)時(shí)，需要鼠標(biāo)點(diǎn)一下界面，才能觸發(fā)keypress！??！
又一思路：界面中需要有一個(gè)聚焦，在回車時(shí)才好執(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)文檔如下：
知識(shí)點(diǎn)補(bǔ)充：
vue項(xiàng)目里登錄界面實(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')){//驗(yàn)證在登錄界面和按得鍵是回車鍵enter
// that.handleSubmit2('ruleForm2');//登錄函數(shù) （handleSubmit2('ruleForm2')-登錄按鈕的點(diǎn)擊事件）
// }
// }
注意：只對(duì)主鍵盤的Enter管用
方法二：
在vue的created鉤子函數(shù)中寫
var _self = this;
document.onkeydown = function(e){
var key = window.event.keyCode;
if(key == 13 || key == 100){
_self.handleSubmit2('ruleForm2');
}
}
對(duì)主鍵盤和小鍵盤的Enter都管用
總結(jié)
以上所述是小編給大家介紹的vue中實(shí)現(xiàn)回車鍵登錄功能，希望對(duì)大家有所幫助，也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module&
本文主要介紹了vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module node:url,因?yàn)槭褂玫膎ode版本是14.15.1低于15.0.0導(dǎo)致,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
Vue3.0版本強(qiáng)勢(shì)升級(jí)點(diǎn)特性詳解
這篇文章主要介紹了Vue3.0版本強(qiáng)勢(shì)升級(jí)點(diǎn)特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2022-06-06
在Vue中進(jìn)行數(shù)據(jù)分頁(yè)的實(shí)現(xiàn)方法
在前端開發(fā)中,數(shù)據(jù)分頁(yè)是一個(gè)常見的需求,特別是當(dāng)處理大量數(shù)據(jù)時(shí),Vue作為一款流行的JavaScript框架,提供了強(qiáng)大的工具和生態(tài)系統(tǒng)來(lái)實(shí)現(xiàn)數(shù)據(jù)分頁(yè),本文將介紹如何在Vue中進(jìn)行數(shù)據(jù)分頁(yè),以及如何設(shè)計(jì)一個(gè)通用的分頁(yè)組件,需要的朋友可以參考下2023-10-10
指令是Vue模板中最常用的一項(xiàng)功能，它帶有前綴v-，主要職責(zé)是當(dāng)其表達(dá)式的值改變時(shí)，相應(yīng)的將某些行為應(yīng)用在 DOM 上。這篇文章主要介紹了vue內(nèi)置指令詳解,需要的朋友可以參考下2018-04-04
Vue+elementUI?el-input輸入框手機(jī)號(hào)校驗(yàn)功能
這篇文章主要介紹了Vue+elementUI?el-input輸入框手機(jī)號(hào)校驗(yàn)功能,限制input框內(nèi)只能輸入數(shù)字,且為11位,通過(guò)實(shí)例代碼介紹了對(duì)輸入手機(jī)號(hào)做校驗(yàn)的方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
vue3-vue-router創(chuàng)建靜態(tài)路由和動(dòng)態(tài)路由方式
這篇文章主要介紹了vue3-vue-router創(chuàng)建靜態(tài)路由和動(dòng)態(tài)路由方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue使用節(jié)流函數(shù)的踩坑實(shí)例指南
防抖和節(jié)流的目的都是為了減少不必要的計(jì)算，下面這篇文章主要給大家介紹了關(guān)于vue使用節(jié)流函數(shù)踩坑的相關(guān)資料,需要的朋友可以參考下2021-05-05
vue再次進(jìn)入頁(yè)面不會(huì)再次調(diào)用接口請(qǐng)求問(wèn)題
這篇文章主要介紹了vue再次進(jìn)入頁(yè)面不會(huì)再次調(diào)用接口請(qǐng)求問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue實(shí)現(xiàn)垂直無(wú)限滑動(dòng)日歷組件
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)垂直無(wú)限滑動(dòng)日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04