18. Vue keycodes按键修饰符

需求

在业务开发中，例如：用户登录添加用户名和密码之后，按下回车键完成登录，这个操作就需要绑定按键的keyup事件，并且还要使用「按键修饰符」来指定按下的键盘按钮。

下面来看看另一个需求来逐步认识一下按钮修饰符。

按键修饰符[1]

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input v-on:keyup.page-down="onPageDown">

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。

下面来完成一下列表操作中的数据添加操作，如下：

这时候只要按下键盘的enter按钮，那么则会执行add方法，执行添加数据，如下：

除了enter这个常用的按键码，还有更多的按键我们需要知道的，如下。

按键码[2]

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode attribute 也是允许的：

<input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

自定义按键修饰符别名

对于一些上面112 这样难以记住的按键符号，可以通过自定义别名来进行记录。

keyCodes[3]

• 「类型」：{ [key: string]: number | Array<number> }
• 「默认值」：{}
• 「用法」：

    Vue.config.keyCodes = {
      v: 86,
      f1: 112,
      // camelCase 不可用
      mediaPlayPause: 179,
      // 取而代之的是 kebab-case 且用双引号括起来
      "media-play-pause": 179,
      up: [38, 87]
    }

    <input type="text" @keyup.media-play-pause="method">

给 `v-on` 自定义键位别名。

对f2按钮自定义按钮修饰符

    // 自定义按键修饰符
    Vue.config.keyCodes = {
        f2: 113,
    };

上面设置好了f2按钮的别名之后，下面给监听事件设置修饰符即可，如下：

浏览器显示如下：

更多的按键码说明

在上面我们知道了113是f2的按键码，那么还有更多的按键码呢？可以看下面的篇章查询。

js keycode键盘码

Reference

[1]

按键修饰符: https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

[2]

按键码: https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81

[3]

keyCodes: https://cn.vuejs.org/v2/api/#keyCodes