詳解在vue專案當中繫結鍵盤事件

2021-10-25 19:58:50 字數 817 閱讀 5658

在vue專案當中,有時會遇到為文字輸入框或者button按鈕繫結鍵盤事件,最常見的就是enter回車事件。

按照vue官網給出的方法是:

v-on:keyup.enter

簡寫:@keyup.enter

如果是繫結在元件上的話,需要加native修飾符

但是,這種方式只能是在獲取焦點的時候起作用,如果失去焦點,則無法執行鍵盤事件。

如果,專案有需求在失去焦點的時候,仍然能夠執行相應的鍵盤事件,完成既定的行為動作,諸如提交表單登入等等。

那就需要採取常規的方法,將鍵盤事件繫結在document文件上,然後通過獲取鍵盤上各個按鍵的值,進行鍵盤事件的執行響應。

mounted() ,

methods: },}

最後附上鍵盤上各個按鍵對應的數值,以及vue鍵盤事件的寫法:

vue中的扣鍵盤事件 

@keydown(鍵盤按下時觸發),@keypress(鍵盤按住時觸發),@keyup(鍵盤彈起)

獲取按鍵的鍵碼 e.keycode

@keyup.13     按回車鍵

@keyup.enter 回車

@keyup.up    上鍵

@keyup.down  下鍵

@keyup.left     左鍵

@keyup.right    右鍵

@keyup.delete    刪除鍵

vue繫結快捷鍵

比如我們要在某個頁面繫結乙個ctrl s的快捷鍵 因為防止按下快捷鍵觸發多次的情況,所以需要將keydown和keyup都繫結 1.在js全域性設定乙個變數 var flag true2.在methods裡面寫入兩個新函式 handlekeydown e e.preventdefault 取消瀏覽器...

在專案當中如何對UIButton進行重新布局

在重新布局之前,我們首先要弄清楚uibutton構成。uibutton內部預設有個uiimageview uilabel控制項,可以分別用下面屬性訪問 property nonatomic,readonly,retain uiimageview imageview property nonatomi...

vue專案目錄結構詳解

專案簡介 基於 vue.js 的前端開發環境,用於前後端分離後的單頁應用開發,可以在開發時使用 es next scss 等最新語言特性。專案包含 基礎庫 vue.js vue router vuex whatwg fetch 編譯 打包工具 webpack babel node sass 單元測試...