From 50dcf455ed926c808d40d14961588b6af47c49e8 Mon Sep 17 00:00:00 2001 From: kokopelli314 Date: Sun, 21 Oct 2018 19:54:00 -0600 Subject: [PATCH 1/4] suggest using KeyboardEvent.key values instead of keyCode values when possible --- package.json | 4 ++-- src/v2/guide/events.md | 38 ++++++++++++++------------------------ 2 files changed, 16 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index cabf4cd6bf..cc72e7eae1 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "vuejs.org", "private": true, "hexo": { - "version": "3.7.0" + "version": "3.7.1" }, "scripts": { "start": "hexo server", @@ -29,4 +29,4 @@ "hoek": "^5.0.3", "request": "^2.85.0" } -} +} \ No newline at end of file diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 8f14384f30..01298cd134 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -223,24 +223,26 @@ 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 - - + + ``` -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 === 'PageDown'`. -``` html - - +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 - - +The usage of `keyCode` attributes is deprecated, but can be used if needed: + +``` html + ``` -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` @@ -252,6 +254,8 @@ Here's the full list of key modifier aliases: - `.left` - `.right` +

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.

+ You can also [define custom key modifier aliases](../api/#keyCodes) via the global `config.keyCodes` object: ``` js @@ -259,20 +263,6 @@ You can also [define custom key modifier aliases](../api/#keyCodes) via the glob 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 - -``` - -In the above example, the handler will only be called if `$event.key === 'PageDown'`. - -

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.

- ## System Modifier Keys > New in 2.1.0+ From 09682e9f78f07991491e2d8385bc7397129837cf Mon Sep 17 00:00:00 2001 From: kokopelli314 Date: Sun, 21 Oct 2018 20:02:53 -0600 Subject: [PATCH 2/4] undo change to package.json --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index cc72e7eae1..cabf4cd6bf 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "vuejs.org", "private": true, "hexo": { - "version": "3.7.1" + "version": "3.7.0" }, "scripts": { "start": "hexo server", @@ -29,4 +29,4 @@ "hoek": "^5.0.3", "request": "^2.85.0" } -} \ No newline at end of file +} From 186bd79fb47b93234bba8aaeb51ad35de16acd8f Mon Sep 17 00:00:00 2001 From: Phan An Date: Mon, 22 Oct 2018 21:25:31 -0600 Subject: [PATCH 3/4] use words instead of `===` Co-Authored-By: kokopelli314 --- src/v2/guide/events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 01298cd134..7ecfc38e8b 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -230,7 +230,7 @@ When listening for keyboard events, we often need to check for specific keys. Vu ``` -In the above example, the handler will only be called if `$event.key === 'PageDown'`. +In the above example, the handler will only be called if `$event.key` is equal to `'PageDown'`. 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. From 92a2b33497b608fd21c17e5c24dbd816b72a6222 Mon Sep 17 00:00:00 2001 From: kokopelli314 Date: Mon, 22 Oct 2018 21:46:01 -0600 Subject: [PATCH 4/4] move deprecation info to tooltip, and link to MDN --- src/v2/guide/events.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 7ecfc38e8b..cfdfcbf7ed 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -236,7 +236,9 @@ You can directly use any valid key names exposed via [`KeyboardEvent.key`](https ### Key Codes -The usage of `keyCode` attributes is deprecated, but can be used if needed: +

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.

+ +Using `keyCode` attributes is also permitted: ``` html