详解Vue的键盘事件

馥琳

目录

• 常用按键别名
  
• 未提供别名的键
  
• 系统修饰键
  
• 自定义按键别名
  
• 总结
  

在js中我们要获取一个按键的编码通常需要通过(keydown/keyup)去绑定一个事件，再通过默认参数event中的keyCode属性去取得编码。如果我们要实现按固定的键才能触发事件时就需要在事件中进行不断的判断，这样会显的很麻烦，如

1. var input = document.querySelector('input')
   
2.     input.onkeyup = function (e) {
   
3.         if (e.keyCode == 13)
   
4.             console.log('我是回车键')
   
5.     }

复制代码

在vue中就为我们一些常用的按键提供了别名，并且只需要我们在事件后加上相应别名即可，不需要我们手动的在事件中进行判断。

常用按键别名

Vue中为一些常用的按键绑定了别名，分别有以下几种。

• 上箭头：up
  
• 下箭头：down
  
• 左箭头：left
  
• 右箭头：right
  
• 空格：space
  
• 换行：tab
  
• 退出：esc
  
• 回车：enter
  
• 删除/退格:delete
  

别名可用来限制键盘事件(keydown、keyup)，只有按下键的是与别名一致时才会去执行所绑定的事件

1. <input v-on:keyup.enter="showtip" type="text">
   
2. 只有按下回车键时才会执行showtip方法

复制代码

另外，tab键只适合与keydown一起使用，在浏览器中tab本身就已经绑定了事件：切换焦点，所以在按下放开tab键后就会触动默认的事件，而忽视了keyup所绑定的事件。而使用keydown就能避过这一情况，在tab按下的那一瞬间便会执行所绑定的事件。

未提供别名的键

另外，在vue中未提供别名的按键，vue也为我们提供了一种方法去使用。vue中规定未提供别名的按键，可使用按键原始的key值去绑定，所谓key值就是由event.key获得的值。如

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

复制代码

以上代码在我们按下任意一键时在控制台就会输出对应的key值，分别按下大小写切换键、Q以及W键会得到以下值
我们就可以使用key值作为按键的别名，特别要注意的是如果key值是单个字母或单词直接使用key值就可以了，但是如果由多个单词组成如大小写切换键就为两个单词的结合，这个时候就要把key值进行改动，使用短横线命名法则将CapsLock-->caps-lock就可以使用了

1. <input v-on:keyup.Q="showtip" type="text">
   
2. //只有按下q键时才会执行showtip方法
   
3. <input v-on:keyup.caps-lock="showtips" type="text">
   
4. //只有按下capslock键时才会执行showtips方法

复制代码

系统修饰键

所谓系统修饰键就是ctrl、alt、shift等。这些键的使用比较来说有点复杂，主要分为以下两种情况
1.当触发事件为keyup时，按下修饰键的同时要按下其他键，再释放其他键，事件才能被触发。

1. <input v-on:keyup.Alt="showtips" type="text">
   
2. //按下alt键后再按任意一键，然后再释放任意键后便会执行showtips方法
   
3. //以上的步骤太过麻烦我们可以这样写
   
4. <input v-on:keyup.Alt.y="showtips" type="text">
   
5. //当按alt y时就会触发事件而不用先按alt再按y再放y

复制代码

当触发事件为keydown时，直接按下修饰键。

1. <input v-on:keydown.Alt="showtips" type="text">
   
2. //只有按下alt键时才会执行showtips方法

复制代码

自定义按键别名

vue中为我们提供了自定义按键别名的方法，通过（Vue.config.keyCodes.自定义键名=键码）的方式去定义

1. <input v-on:keydown.en="showtips" type="text">
   
2. //只有按下回车键时才会执行showtips方法
   
3. Vue.config.keyCodes.en=13
   
4. //13是回车键的键码，将他的别名定义为en

复制代码

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
                                                        
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！