在js中我們要獲取一個(gè)按鍵的編碼通常需要通過(guò)(keydown/keyup)去綁定一個(gè)事件，再通過(guò)默認(rèn)參數(shù)event中的keyCode屬性去取得編碼。如果我們要實(shí)現(xiàn)按固定的鍵才能觸發(fā)事件時(shí)就需要在事件中進(jìn)行不斷的判斷，這樣會(huì)顯的很麻煩，如

var input = document.querySelector('input')
    input.onkeyup = function (e) {
        if (e.keyCode == 13)
            console.log('我是回車(chē)鍵')
    }

在vue中就為我們一些常用的按鍵提供了別名，并且只需要我們?cè)谑录蠹由舷鄳?yīng)別名即可，不需要我們手動(dòng)的在事件中進(jìn)行判斷。

常用按鍵別名

Vue中為一些常用的按鍵綁定了別名，分別有以下幾種。

• 上箭頭：up
• 下箭頭：down
• 左箭頭：left
• 右箭頭：right
• 空格：space
• 換行：tab
• 退出：esc
• 回車(chē)：enter
• 刪除/退格:delete

別名可用來(lái)限制鍵盤(pán)事件(keydown、keyup)，只有按下鍵的是與別名一致時(shí)才會(huì)去執(zhí)行所綁定的事件

<input v-on:keyup.enter="showtip" type="text">
只有按下回車(chē)鍵時(shí)才會(huì)執(zhí)行showtip方法

另外，tab鍵只適合與keydown一起使用，在瀏覽器中tab本身就已經(jīng)綁定了事件：切換焦點(diǎn)，所以在按下放開(kāi)tab鍵后就會(huì)觸動(dòng)默認(rèn)的事件，而忽視了keyup所綁定的事件。而使用keydown就能避過(guò)這一情況，在tab按下的那一瞬間便會(huì)執(zhí)行所綁定的事件。

未提供別名的鍵

另外，在vue中未提供別名的按鍵，vue也為我們提供了一種方法去使用。vue中規(guī)定未提供別名的按鍵，可使用按鍵原始的key值去綁定，所謂key值就是由event.key獲得的值。如

var input = document.querySelector('input')
    input.onkeyup = function (e) {
       console.log(e.key)
       }

以上代碼在我們按下任意一鍵時(shí)在控制臺(tái)就會(huì)輸出對(duì)應(yīng)的key值，分別按下大小寫(xiě)切換鍵、Q以及W鍵會(huì)得到以下值

我們就可以使用key值作為按鍵的別名，特別要注意的是如果key值是單個(gè)字母或單詞直接使用key值就可以了，但是如果由多個(gè)單詞組成如大小寫(xiě)切換鍵就為兩個(gè)單詞的結(jié)合，這個(gè)時(shí)候就要把key值進(jìn)行改動(dòng)，使用短橫線(xiàn)命名法則將CapsLock-->caps-lock就可以使用了

<input v-on:keyup.Q="showtip" type="text">
//只有按下q鍵時(shí)才會(huì)執(zhí)行showtip方法
<input v-on:keyup.caps-lock="showtips" type="text">
//只有按下capslock鍵時(shí)才會(huì)執(zhí)行showtips方法

系統(tǒng)修飾鍵

所謂系統(tǒng)修飾鍵就是ctrl、alt、shift等。這些鍵的使用比較來(lái)說(shuō)有點(diǎn)復(fù)雜，主要分為以下兩種情況

1.當(dāng)觸發(fā)事件為keyup時(shí)，按下修飾鍵的同時(shí)要按下其他鍵，再釋放其他鍵，事件才能被觸發(fā)。

<input v-on:keyup.Alt="showtips" type="text">
//按下alt鍵后再按任意一鍵，然后再釋放任意鍵后便會(huì)執(zhí)行showtips方法
//以上的步驟太過(guò)麻煩我們可以這樣寫(xiě)
<input v-on:keyup.Alt.y="showtips" type="text">
//當(dāng)按alt y時(shí)就會(huì)觸發(fā)事件而不用先按alt再按y再放y

當(dāng)觸發(fā)事件為keydown時(shí)，直接按下修飾鍵。

<input v-on:keydown.Alt="showtips" type="text">
//只有按下alt鍵時(shí)才會(huì)執(zhí)行showtips方法

自定義按鍵別名

vue中為我們提供了自定義按鍵別名的方法，通過(guò)（Vue.config.keyCodes.自定義鍵名=鍵碼）的方式去定義

<input v-on:keydown.en="showtips" type="text">
//只有按下回車(chē)鍵時(shí)才會(huì)執(zhí)行showtips方法
Vue.config.keyCodes.en=13
//13是回車(chē)鍵的鍵碼，將他的別名定義為en

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容! 

最新評(píng)論