如何在vue項目中對鍵盤事件進(jìn)行監(jiān)聽？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

10年積累的做網(wǎng)站、成都網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計制作后付款的網(wǎng)站建設(shè)流程，更有耒陽免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

按鍵修飾符

在監(jiān)聽鍵盤事件時，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符：

<!-- 只有在 `key` 是 `Enter` 時調(diào)用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

你可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉(zhuǎn)換為 kebab-case 來作為修飾符。

<input v-on:keyup.page-down="onPageDown">

為了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數(shù)常用的按鍵碼的別名：

• - enter

• - tab

• - delete (捕獲“刪除”和“退格”鍵)

• - esc

• - space

• - up

• - down

• - left

• - right

你還可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

系統(tǒng)修飾鍵

可以用如下修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。

• - .ctrl

• - .alt

• - .shift

• - .meta

Do something
與按鍵別名不同的是，修飾鍵和 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進(jìn)行了封裝，原生的事件不起作用。

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

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

.exact修飾符

.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。

<!-- 即使 Alt 或 Shift 被一同按下時也會觸發(fā) -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的時候才觸發(fā) -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 沒有任何系統(tǒng)修飾符被按下的時候才觸發(fā) -->
<button v-on:click.exact="onClick">A</button>

鼠標(biāo)按鈕修飾符

• .left

• .right

• .middle

  
  

這些修飾符會限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕。

系統(tǒng)按鍵組合

如果我們要監(jiān)聽全局的按鍵操作方法，顯然，將其綁定在頁面元素上是不行的。

我們可在mounted里面監(jiān)聽：

mounted() {
  document.onkeydown = function (event) {
    let key = window.event.keyCode;
    if (key === 65 && event.ctrlKey) { 
      // 監(jiān)聽ctrl+A組合鍵      
      window.event.preventDefault(); //關(guān)閉瀏覽器默認(rèn)快捷鍵      
      console.log('crtl+ a組合鍵')    
    } else if(key === 83 && event.ctrlKey) {       
      window.event.preventDefault(); //關(guān)閉瀏覽器快捷鍵
      console.log('保存');
    }
  }
}

從以上例子可以看出，shift、Control、Alt 在JS中也可用“window.event.shiftKey”、“window.event.ctrlKey”、“window.event.altKey” 代替。

附錄-鍵盤按鈕keyCode表

關(guān)于如何在vue項目中對鍵盤事件進(jìn)行監(jiān)聽問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

當(dāng)前題目：如何在vue項目中對鍵盤事件進(jìn)行監(jiān)聽-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://chinadenli.net/article16/edjgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、Google、網(wǎng)站維護、用戶體驗、網(wǎng)站改版、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)