vue監(jiān)聽鍵盤事件的快捷方法【推薦】

更新時間：2018年07月11日 11:09:35 作者：前端菜鳥111

這篇文章主要介紹了vue監(jiān)聽鍵盤事件的快捷方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

在我們的項目經(jīng)常需要監(jiān)聽一些鍵盤事件來觸發(fā)程序的執(zhí)行，而Vue中允許在監(jiān)聽的時候添加關鍵修飾符：

<input v-on:keyup.13="submit">

對于一些常用鍵，還提供了按鍵別名：

<input @keyup.enter="submit">   <!-- 縮寫形式 -->

全部的按鍵別名：

.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

修飾鍵：

.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

與按鍵別名不同的是，修飾鍵和 keyup 事件一起用時，事件引發(fā)時必須按下正常的按鍵。換一種說法：如果要引發(fā) keyup.ctrl，必須按下 ctrl 時釋放其他的按鍵；單單釋放 ctrl 不會引發(fā)事件。

<!-- 按下Alt + 釋放C觸發(fā) -->
<input @keyup.alt.67="clear">
<!-- 按下Alt + 釋放任意鍵觸發(fā) -->
<input @keyup.alt="other">
<!-- 按下Ctrl + enter時觸發(fā) -->
<input @keydown.ctrl.13="submit">

對于elementUI的input，我們需要在后面加上.native, 因為elementUI對input進行了封裝，原生的事件不起作用。

<input v-model="form.name" placeholder="昵稱" @keyup.enter="submit">
<el-input v-model="form.name" placeholder="昵稱" @keyup.enter.native="submit"></el-input>

總結

以上所述是小編給大家介紹的vue監(jiān)聽鍵盤事件的快捷方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vue項目展示pdf文件的方法實現(xiàn)
本文主要介紹了vue項目展示pdf文件的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-07-07
vue在頁面中如何使用window全局變量
這篇文章主要介紹了vue在頁面中如何使用window全局變量問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue模塊導入報錯問題Module not found: Error:[CaseSensi
這篇文章主要介紹了vue模塊導入報錯問題Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
基于vue 開發(fā)中出現(xiàn)警告問題去除方法
下面小編就為大家分享一篇基于vue 開發(fā)中出現(xiàn)警告問題去除方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
vue3?身份證校驗、識別性別/生日/年齡的操作代碼
這篇文章主要介紹了vue3?身份證校驗、識別性別/生日/年齡的操作代碼,本文通過實例代碼給大家介紹的非常詳細,表單項綁定 @change 事件,?定義身份驗證規(guī)則規(guī)則,感興趣的朋友跟隨小編一起看看吧
2024-07-07
Vue之生命周期函數(shù)詳解
這篇文章主要為大家介紹了Vue之生命周期函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
Vue?FileManagerPlugin?報錯問題及解決
這篇文章主要介紹了Vue?FileManagerPlugin?報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue報錯之exports is not defined問題的解決
這篇文章主要介紹了vue報錯之exports is not defined問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue-meta實現(xiàn)router動態(tài)設置meta標簽的方法
這篇文章主要介紹了vue-meta實現(xiàn)router動態(tài)設置meta標簽,實現(xiàn)思路非常簡單內容包括mata標簽的特點和mata標簽共有兩個屬性，分別是http-equiv屬性和name屬性，本文通過實例代碼給大家詳細講解需要的朋友可以參考下
2022-11-11
Vue3中列表拖拽排序的實現(xiàn)示例
本文主要介紹了Vue3中列表拖拽排序的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-06-06