vuetify 監聽鍵盤按鍵
阿新 • • 發佈：2021-11-09
點選回車鍵觸發登入事件
1. 建立鉤子函式 created（） ，呼叫事件created(){ this.keyupSubmit(); },
2.事件中監聽回車鍵
keyupSubmit(){ document.onkeydown = e =>{ let _key = window.event.keyCode; if(_key === 13){ this.login(); } } },
點選tab鍵 切換input輸入框
注：點選tab鍵會聚焦頁面上的按鈕、複選框、瀏覽器欄等
問：那麼如何只選擇輸入框
1.首先在輸入框中設定tabindex，tabindex = 0 || tabindex = 1 設定tab鍵聚焦順序，負數則不聚焦
<v-text-field2.在最後一個輸入框設定失去焦點（@blur）觸發事件 focusRef()ref ="lbj02" tabindex="3" v-model="vcode" :rules="[rules.required]" label="登入驗證碼" placeholder="請輸入驗證碼" color="#00f" prepend-inner-icon="mdi-shield-alert-outline" required >
<v-text-field @keypress.native.tab= "focusNextInput(2)" class3. focusRef 方法中設定選擇第一個輸入框聚焦="class1" ref ="lbj02" tabindex="3" v-model="vcode" :rules="[rules.required]" label="最後一個輸入框" placeholder="最後一個輸入框" color="#00f" @blur = "focusRef()" prepend-inner-icon="mdi-shield-alert-outline" required >
focusRef(){ this.$refs.lbj.focus(); },
注：lbj 是第一個輸入框的ref值， focus()方法聚焦輸入框