You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+8-5Lines changed: 8 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -75,7 +75,7 @@ For form control elements, React provides with `onKeyDown`, `onKeyPress` and `on
75
75
76
76
Property|Type|Default|Description
77
77
---|---|---|---
78
-
handleKeys| Array | [] |An array of keys this handler should handle. <br/> There are also some handy alias for keys, see bellow for details.
78
+
handleKeys| Array | [] |An array of keys this handler should handle. <br/> There are also some handy alias for keys, see bellow for details. e.g. `['a', 'b', 'numeric']`
79
79
handleEventType| String | keydown |Keyboard event type. <br />This can be 'keyup', 'keydown' or 'keypress'. <br /><sup>*</sup>**Note**: 'keypress' event only support printable keys. i.e. no support for modifier keys or 'tab', 'enter' etc.
80
80
handleFocusableElements| Bool | false | By default, handler only handles key events sourced from `doucment.body`. When this props is set to `true`, it will also handle key events from all focusable elements. This props only apply when there's no children.
@@ -93,7 +93,7 @@ The `handleKeys` prop accepts an array of key names. Key names and key alias fre
93
93
- Therefore, 'A' is the same as 'a' and 'ALT' or 'Alt' is the same as 'alt';
94
94
- Event if you set `heandleKeys` to handle lowercase 'a', it will still handles key event for 'A' with caps lock on.
95
95
- To handle combined keys like `shift` and `a`, use key names in the format of `shift+a`;
96
-
- The first parameter to the `onKeyEvent` callback function will always use the exact string given in `handleKeys` prop regardless of its letter cases.
96
+
- The first parameter to the `onKeyEvent` callback function will always use the exact string given in `handleKeys` prop regardless of its letter cases. i.e. It will be 'A' if `handleKeys={['A']}`
97
97
98
98
1. It is recommended to always use lower case names just for consistency.
99
99
1. You can also use key name alias like 'numbers' or 'alphanumeric'. When a keyboard event matches, the first (`key`) parameter to the callback function will be a lowercase key name (see bellow for all key names).
@@ -113,7 +113,7 @@ You can handle one of more common keys by using an array of their names.
113
113
Key name|Description / key code
114
114
---|---
115
115
a, b, ... z | letter keys, 65 ~ 90
116
-
0, 1, ... 9 | number keys 48 ~ 57 and 96 ~ 105
116
+
0, 1, ... 9 | number keys 48 ~ 57
117
117
backspace|8
118
118
del/delete| 46
119
119
tab| 9
@@ -138,6 +138,8 @@ down| 40
138
138
[| 219
139
139
\| 220
140
140
]| 221
141
+
+| 107
142
+
*| 106
141
143
142
144
**Note**: Native keyboard events with modifier key(s) will **NOT** match common keys in `handleKeys`.
143
145
To match native keyboard event with modifiers, read the next section.
@@ -162,6 +164,7 @@ shift| shift key
162
164
meta| meta, cmd, Window, command key
163
165
alt| option, alt key
164
166
167
+
Tips: Modifier keys only work well with common keys a-z. OS and/or browsers use other combinations for other purposes. For example, `cmd + right` is used as the shortcut to navigate 'forward' in some browsers.
165
168
166
169
### Key alias
167
170
@@ -186,9 +189,9 @@ Alias|Keys|Description
186
189
187
190
__Note__:
188
191
1. Alias keys are alias to a list of common keys. Expect the same behavior as if the respective array of of common key names is in use.
189
-
1. When a keyboard event matches, the first (`key`) parameter to the callback function will be the matched.
190
-
lowercase common key name.
192
+
1. When a keyboard event matches, the first (`key`) parameter to the callback function will be the matched lowercase common key name. e.g. `a` for alias `numeric`.
191
193
1. Alias key names do not work with modifiers.
194
+
1. You can mix alias with common keys. e.g. `['numeric', 'a', 'enter']`
0 commit comments