Vue按键修饰符

[TOC]

## 键盘事件修饰符

和点击事件一样键盘也有对应的修饰符，在键盘事件后面添加修饰符即可，例如示例中的keyup.enter，意思就是只有按下enter键时事件才触发

①vue自带键盘修饰符enter，tab，delete，esc，space，up，down，left，right

②键盘码修饰符，除了vue自带的键盘修饰符外，我们也可以直接使用键盘码来作为修饰符，例如示例的keyup.113,意思是只有按下F2事件才触发，这里113正是F2的键盘码，这样一来所有键盘按键的码值都可以直接作为修饰符作用于键盘事件后

③自定义键盘修饰符，vue自带修饰符不够用，我们直接用键盘码的话，记键盘码太麻烦，这样就可以使用自定义键盘修饰符了，例如示例中我们将F2自定义为键盘修饰符，只需要设置 Vue.config.keyCodes.f2 = 113，我们就可以直接和enter修饰符一样使用f2修饰符了`@keyup.f2`即可

```html
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css"/>;
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
</hred>
<div id="app">
    任意键触发：<input type="text" @keyup="add" /><br /><br />
    只有enter键触发：<input type="text" @keyup.enter="add" /><br /><br />
    只有F2键触发,我用的是键盘码作为修饰符：<input type="text" @keyup.113="add" /><br /><br />
    只有F2键触发,我用的是自定义f2修饰符：<input type="text" @keyup.f2="add" /><br /><br />
</div>
<script type="text/javascript">
    Vue.config.keyCodes.f2 = 113
    var vm = new Vue({
        el: "#app",
        data: {
        },
        methods: {
            add() {
                console.log("keyup")
            }
        }
    })
</script>
</html>
```

### 键值码

| 键值码 | 键 | 键值码 | 键 | 键值码 | 键 | 键值码 | 键 |
| ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| keycode 8 | BackSpace BackSpace | keycode 9 | Tab Tab | keycode 12 | Clear | keycode 13 | Enter |
| keycode 16 | Shift_L | keycode 17 | Control_L | keycode 18 | Alt_L | keycode 19 | Pause |
| keycode 20 | Caps_Lock | keycode 27 | Escape Escape | keycode 32 | space space | keycode 33 | Prior |
| keycode 34 | Next | keycode 35 | End | keycode 36 | Home | keycode 37 | Left |
| keycode 38 | Up | keycode 39 | Right | keycode 40 | Down | keycode 41 | Select |
| keycode 42 | Print | keycode 43 | Execute | keycode 45 | Insert | keycode 46 | Delete |
| keycode 47 | Help | keycode 48 | 0 equal braceright | keycode 49 | 1 exclam onesuperior | keycode 50 | 2 quotedbl twosuperior |
| keycode 51 | 3 section threesuperior | keycode 52 | 4 dollar | keycode 53 | 5 percent | keycode 54 | 6 ampersand |
| keycode 55 | 7 slash braceleft | keycode 56 | 8 parenleft bracketleft | keycode 57 | 9 parenright bracketright | keycode 65 | a A |
| keycode 66 | b B | keycode 67 | c C | keycode 68 | d D | keycode 69 | e E EuroSign |
| keycode 70 | f F | keycode 71 | g G | keycode 72 | h H | keycode 73 | i I |
| keycode 74 | j J | keycode 75 | k K | keycode 76 | l L | keycode 77 | m M mu |
| keycode 78 | n N | keycode 79 | o O | keycode 80 | p P | keycode 81 | q Q at |
| keycode 82 | r R | keycode 83 | s S | keycode 84 | t T | keycode 85 | u U |
| keycode 86 | v V | keycode 87 | w W | keycode 88 | x X | keycode 89 | y Y |
| keycode 90 | z Z | keycode 96 | KP_0 KP_0 | keycode 97 | KP_1 KP_1 | keycode 98 | KP_2 KP_2 |
| keycode 99 | KP_3 KP_3 | keycode 100 | KP_4 KP_4 | keycode 101 | KP_5 KP_5 | keycode 102 | KP_6 KP_6 |
| keycode 103 | KP_7 KP_7 | keycode 104 | KP_8 KP_8 | keycode 105 | KP_9 KP_9 | keycode 106 | KP_Multiply KP_Multiply |
| keycode 107 | KP_Add KP_Add | keycode 108 | KP_Separator KP_Separator | keycode 109 | KP_Subtract KP_Subtract | keycode 110 | KP_Decimal KP_Decimal |
| keycode 111 | KP_Divide KP_Divide | keycode 112 | F1 | keycode 113 | F2 | keycode 114 | F3 |
| keycode 115 | F4 | keycode 116 | F5 | keycode 117 | F6 | keycode 118 | F7 |
| keycode 119 | F8 | keycode 120 | F9 | keycode 121 | F10 | keycode 122 | F11 |
| keycode 123 | F12 | keycode 124 | F13 | keycode 125 | F14 | keycode 126 | F15 |
| keycode 127 | F16 | keycode 128 | F17 | keycode 129 | F18 | keycode 130 | F19 |
| keycode 131 | F20 | keycode 132 | F21 | keycode 133 | F22 | keycode 134 | F23 |
| keycode 135 | F24 | keycode 136 | Num_Lock | keycode 137 | Scroll_Lock | keycode 187 | acute grave |
| keycode 188 | comma semicolon | keycode 189 | minus underscore | keycode 190 | period colon | keycode 192 | numbersign apostrophe |
| keycode 210 | plusminus hyphen macron | keycode 211 |  | keycode 212 | copyright registered | keycode 213 | guillemotleft guillemotright |
| keycode 214 | masculine ordfeminine | keycode 215 | ae AE | keycode 216 | cent yen | keycode 217 | questiondown exclamdown |
| keycode 218 | onequarter onehalf threequarters | keycode 220 | less greater bar | keycode 221 | plus asterisk asciitilde | keycode 227 | multiply division |
| keycode 228 | acircumflex Acircumflex | keycode 229 | ecircumflex Ecircumflex | keycode 230 | icircumflex Icircumflex | keycode 231 | ocircumflex Ocircumflex |
| keycode 232 | ucircumflex Ucircumflex | keycode 233 | ntilde Ntilde | keycode 234 | yacute Yacute | keycode 235 | oslash Ooblique |
| keycode 236 | aring Aring | keycode 237 | ccedilla Ccedilla | keycode 238 | thorn THORN | keycode 239 | eth ETH |
| keycode 240 | diaeresis cedilla currency | keycode 241 | agrave Agrave atilde Atilde | keycode 242 | egrave Egrave | keycode 243 | igrave Igrave |
| keycode 244 | ograve Ograve otilde Otilde | keycode 245 | ugrave Ugrave | keycode 246 | adiaeresis Adiaeresis | keycode 247 | ediaeresis Ediaeresis |
| keycode 248 | idiaeresis Idiaeresis | keycode 249 | odiaeresis Odiaeresis | keycode 250 | udiaeresis Udiaeresis | keycode 251 | ssharp question backslash |
| keycode 252 | asciicircum degree | keycode 253 | 3 sterling | keycode 254 | Mode_switch |  |  |