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

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

在vue中就為我們一些常用的按鍵提供了別名，并且只需要我們在事件后加上相應(yīng)別名即可，不需要我們手動的在事件中進(jìn)行判斷。

常用按鍵別名

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

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

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

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

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

未提供別名的鍵

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

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

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

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

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

系統(tǒng)修飾鍵

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

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

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

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

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

自定義按鍵別名

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

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

總結(jié)

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

最新評論