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

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

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

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

全部的按鍵別名：

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

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

對(duì)于elementUI的input，我們需要在后面加上.native, 因?yàn)閑lementUI對(duì)input進(jìn)行了封裝，原生的事件不起作用。

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

總結(jié)

以上所述是小編給大家介紹的vue監(jiān)聽(tīng)鍵盤(pán)事件的快捷方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！