vue監聽鍵盤事件的快捷方法【推薦】

在我們的項目經常需要監聽一些鍵盤事件來觸發程序的執行，而Vue中允許在監聽的時候添加關鍵修飾符：

<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 事件一起用時，事件引發時必須按下正常的按鍵。換一種說法：如果要引發 keyup.ctrl，必須按下 ctrl 時釋放其他的按鍵；單單釋放 ctrl 不會引發事件。

<!-- 按下Alt + 釋放C觸發 -->
<input @keyup.alt.67="clear">
<!-- 按下Alt + 釋放任意鍵觸發 -->
<input @keyup.alt="other">
<!-- 按下Ctrl + enter時觸發 -->
<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監聽鍵盤事件的快捷方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com