Skip to content

Update Key Modifiers to suggest KeyboardEvent.key #1850

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 28, 2019
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 16 additions & 24 deletions src/v2/guide/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -223,24 +223,28 @@ The `.passive` modifier is especially useful for improving performance on mobile

## Key Modifiers

When listening for keyboard events, we often need to check for common key codes. Vue also allows adding key modifiers for `v-on` when listening for key events:
When listening for keyboard events, we often need to check for specific keys. Vue allows adding key modifiers for `v-on` when listening for key events:

``` html
<!-- only call `vm.submit()` when the `keyCode` is 13 -->
<input v-on:keyup.13="submit">
<!-- only call `vm.submit()` when the `key` is PageDown -->
<input @keyup.page-down="onPageDown">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for late, why here the key becomes PageDown not still Enter? (The keyCode of Enter is 13 and the keyCode of PageDown is 34. Ref: https://keycode.info, https://css-tricks.com/snippets/javascript/javascript-keycodes/)
I think it's better to remain the key Enter is this case to match the meaning of "submit".

Thanks.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good point @Jinjiang, sorry I missed this. @kokopelli314 would you mind a subsequent PR?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No worries I've submitted one here: #1970. @Jinjiang care to take a look? ;)

```

Remembering all the `keyCode`s is a hassle, so Vue provides aliases for the most commonly used keys:
In the above example, the handler will only be called if `$event.key` is equal to `'PageDown'`.

``` html
<!-- same as above -->
<input v-on:keyup.enter="submit">
You can directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) as modifiers by converting them to kebab-case.

### Key Codes

<p class="tip">The use of `keyCode` events [is deprecated](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) and may not be supported in new browsers.</p>

<!-- also works for shorthand -->
<input @keyup.enter="submit">
Using `keyCode` attributes is also permitted:

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

Here's the full list of key modifier aliases:
Vue provides aliases for the most commonly used key codes when necessary for legacy browser support:

- `.enter`
- `.tab`
Expand All @@ -252,27 +256,15 @@ Here's the full list of key modifier aliases:
- `.left`
- `.right`

<p class="tip">A few keys (`.esc` and all arrow keys) have inconsistent `key` values in IE9, so these built-in aliases should be preferred if you need to support IE9.</p>

You can also [define custom key modifier aliases](../api/#keyCodes) via the global `config.keyCodes` object:

``` js
// enable `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
```

### Automatic Key Modifiers

> New in 2.5.0+

You can also directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) as modifiers by converting them to kebab-case:

``` html
<input @keyup.page-down="onPageDown">
```
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess the key PageDown comes from here. Maybe we could rearrange these paragraphs to preserve this code example to show how kebab-case name converted. I will leave more advice for this to PR #1970. @phanan 😉


In the above example, the handler will only be called if `$event.key === 'PageDown'`.

<p class="tip">A few keys (`.esc` and all arrow keys) have inconsistent `key` values in IE9, their built-in aliases should be preferred if you need to support IE9.</p>

## System Modifier Keys

> New in 2.1.0+
Expand Down