[Vue]键盘事件
1. Vue中常用的按键别名:
回车=>enter
删除=>delete(捕获“删除”和“退格”键)
退出=>esc
空格=>space
换行=>tab(特殊，必须配合keydown使用)
上=>up
下 =>down
左=>left
右=>right
2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名)
3. 系统修饰键（用法特殊): ctrl、alt、shift、meta(win键)
(1).配合keyup使用: 按下修饰健的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用: 正常触发事件。
4. 也可以使用keyCode去指定具体的按键(不推荐，已从web标准中移除,详见MDN)
5. Vue.config.keyCodes.自定义排名=键码，可以去定制按键别名
6. 组合键可以在@keyup @keydown后面连续写多个，如：@keyup.ctrl.alt.y
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/vue-2.5.9.js"></script> </head> <!-- 1. Vue中常用的按键别名: 回车 => enter 删除 => delete(捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab(特殊,必须配合keydown使用) 上 => up 下 => down 左 => left 右 => right 2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名) 3. 系统修饰键（用法特殊): ctrl、alt、shift、meta(win键) (1).配合keyup使用: 按下修饰健的同时，再按下其他键，随后释放其他键，事件才被触发。 (2).配合keydown使用: 正常触发事件。 4. 也可以使用keyCode去指定具体的按键(不推荐,已从web标准中移除,详见MDN) 5. Vue.config.keyCodes.自定义排名=键码，可以去定制按键别名 --> <body> <div id="root"> <h2>欢迎学习{{name}}~</h2> <input type="text" name="" placeholder="按下Enter提示输入" id="" @keyup.enter="onkey"> <input type="text" name="" placeholder="按下CapsLock提示输入" id="" @keyup.caps-lock="onkey"> <!-- 按下tab键会切走焦点，用keyup绑定不生效，应该用keydown --> <input type="text" name="" placeholder="按下Tab提示输入" id="" @keydown.tab="onkey"> <!-- 系统修饰键 --> <input type="text" name="" placeholder="按下Ctrl提示输入" id="" @keyup.ctrl="onkey"> <!-- 组合键可以在@keyup @keydown后面连续写多个 --> <input type="text" name="" placeholder="按下Ctrl+Alt+Y提示输入" id="" @keyup.ctrl.alt.y="onkey"> </div> </body> <script> let vm = new Vue({ el: '#root', data: { name: '键盘事件' }, methods: { onkey: function (e) { // 如果一个按键名/按键编码未知，可以用keyup事件打印event.key或者event.keyCode查看 console.log('key is --> ', e.key, e.keyCode); console.log('value:', e.target.value); } } }) </script> </html>
