怎么在vue中實現(xiàn)一個回車鍵登錄功能-創(chuàng)新互聯(lián)
這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)怎么在vue中實現(xiàn)一個回車鍵登錄功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),滄州企業(yè)網(wǎng)站建設(shè),滄州品牌網(wǎng)站建設(shè),網(wǎng)站定制,滄州網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,
滄州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
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)有一個問題，在登錄進系統(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屬性就能獲取焦點
以上方法雖然也能觸發(fā)keypress，但還有點瑕疵~ 就是打開登錄頁時，需要鼠標點一下界面，才能觸發(fā)keypress?。?！
又一思路：界面中需要有一個聚焦，在回車時才好執(zhí)行keypress。故在界面中加input文本框，讓不管從哪里打開或跳到Login.vue都聚焦文本框
所以自定義指令：
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
},自定義指令及inserted用法截圖自vue官網(wǎng)文檔如下：
知識點補充：
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');
}
}上述就是小編為大家分享的怎么在vue中實現(xiàn)一個回車鍵登錄功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站題目：怎么在vue中實現(xiàn)一個回車鍵登錄功能-創(chuàng)新互聯(lián)
網(wǎng)址分享：
http://weahome.cn/article/dchcps.html
重慶分公司
重慶分公司
