[Vue]键盘事件-526互联

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>