Vue Element-ui 鍵盤事件失效的解決

更新時間：2022年10月17日 09:43:31 作者：一個水瓶座程序猿.

這篇文章主要介紹了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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: