Vue Element-ui 鍵盤事件失效的解決
Element-ui 鍵盤事件失效
按鍵修飾符
vue中提供了一些按鍵修飾符,開發(fā)者可以直接通過按鍵修飾符捕捉鍵盤事件
Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符:
.enter
.tab
.delete
(捕獲“刪除”和“退格”鍵).esc
.space
.up
.down
.left
.right
例如:.enter
<!-- 只有在 `key` 是 `Enter` 時調(diào)用 `vm.submit()` --> <input v-on:keyup.enter="submit">
但是在開發(fā)過程中會遇到不生效的情況,此時我們需要加上 .native 按鍵修飾符
注意:只適用于 input 框 獲得焦點(diǎn) 時按下回車時生效,失去焦點(diǎn)時,此功能仍不可用
<input v-on:keyup.enter.native="submit">
如果是 **button** 按鈕,那么應(yīng)該把它綁定在 **document** 上:
<el-button type="primary" @keyup.enter.native="submitForm('ruleForm')">去登錄</el-button>
正確代碼:
?? ?// 在 created 生命周期鉤子函數(shù)里寫 ?? ?created:function(){ ?? ??? ?// 主頁添加鍵盤事件,不可以直接在焦點(diǎn)事件上添加回車 ?? ??? ?var that=this; ?? ? ? ?document.οnkeydοwn=function(event){ ?? ??? ? ? var key=window.event.keyCode; ?// 事件對象的 keyCode ?? ??? ??? ? ?if(key==13){ ?? ??? ??? ??? ? that.submitForm('ruleForm'); ?? ??? ??? ?} ?? ??? ?} ?? ?}
使用element-ui時監(jiān)聽登錄界面全局鍵盤回車事件
方法一
<el-form-item prop="account">? ? ?? <el-input v-on:keyup.enter.native="handleSubmit2()" style="color: #ffffff" type="text" v-model="ruleForm.account" auto-complete="off" placeholder="賬號"></el-input> </el-form-item>
如果用了element-ui的話要在后面加上native,不然被包裹不能讀取到,這種寫法只能在鼠標(biāo)點(diǎn)擊輸入框的時候按回車才有用
方法二
在export default里面添加鉤子函數(shù)
export default { ? created() { ? ? var _self = this ? ? ? document.onkeydown = function(e) { ? ? ? var key = window.event.keyCode ? ? ? ? if (key === 13) { ? ? ? ? _self.handleSubmit2() ? ? ? } ? ? } ? }, ? beforeDestroy() { ? ? document.onkeydown = function(e) { ? ? ? var key = window.event.keyCode ? ? ? ? if (key === 13) { ? ? ? ? } ? ? } ? },
如果只有created函數(shù)的話那么在其他界面按回車會依然調(diào)用函數(shù),造成錯誤的頁面跳轉(zhuǎn),所以要離開這個界面是要取消。
這樣寫就可以實現(xiàn)在該頁面鍵盤回車實現(xiàn)登錄
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue基礎(chǔ)popover彈出框編寫及bug問題分析
這篇文章主要為大家介紹了Vue基礎(chǔ)popover彈出框編寫及bug問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09解決Vite無法分析出動態(tài)import的類型,控制臺出警告的問題
這篇文章主要介紹了解決Vite無法分析出動態(tài)import的類型,控制臺出警告的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03詳解Vue-cli webpack移動端自動化構(gòu)建rem問題
這篇文章主要介紹了詳解Vue-cli webpack移動端自動化構(gòu)建rem問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04