在我們的項目經常需要監聽一些鍵盤事件來觸發程序的執行，而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監聽鍵盤事件的快捷方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
