1# Component Keyboard Shortcut Event 2 3You can set one or more custom keyboard shortcuts for a component. The behavior of these keyboard shortcuts is the same as that of clicks. Components can respond to custom keyboard shortcuts even when they are not focused. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 8 9## APIs 10 11keyboardShortcut(value: string | [FunctionKey], keys: Array<[ModifierKey]>) 12 13**Parameters** 14 15| Name | Type | Mandatory | Description | 16| ----- | ------------------------------------- | ---- | ---------------------------------------- | 17| value | string \| [FunctionKey](#functionkey) | Yes | Character key (which can be entered through the keyboard) or [function key](#functionkey).<br>| 18| keys | Array<[ModifierKey](#modifierkey)> | Yes | Modifier keys.<br> | 19 20## ModifierKey 21 22| Name | Description | 23| ----- | ------------ | 24| CTRL | Ctrl key on the keyboard. | 25| SHIFT | Shift key on the keyboard.| 26| ALT | Alt key on the keyboard. | 27 28## FunctionKey 29 30| Name | Description | 31| ---- | ------------ | 32| ESC | Esc key on the keyboard.| 33| F1 | F1 key on the keyboard. | 34| F2 | F2 key on the keyboard. | 35| F3 | F3 key on the keyboard. | 36| F4 | F4 key on the keyboard. | 37| F5 | F5 key on the keyboard. | 38| F6 | F6 key on the keyboard. | 39| F7 | F7 key on the keyboard. | 40| F8 | F8 key on the keyboard. | 41| F9 | F9 key on the keyboard. | 42| F10 | F10 key on the keyboard.| 43| F11 | F11 key on the keyboard.| 44| F12 | F12 key on the keyboard.| 45 46## Precautions for Using Keyboard Shortcuts 47 48| Scenario | Processing Logic | Example | 49| ---------------------------------------- | ---------------------------------- | ---------------------------------------- | 50| All components that support the **onClick** event | Custom keyboard shortcuts are supported. | – | 51| Requirements for custom keyboard shortcuts | A custom keyboard shortcut consists of one or more modifier keys (**Ctrl**, **Shift**, **Alt**, or any combination thereof) and a character key or function key.| Button('button1').keyboardShortcut('a',[ModifierKey.CTRL]) | 52| Setting one custom keyboard shortcut for multiple components | Only the first component in the component tree responds to the custom keyboard shortcut. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[ModifierKey.CTRL]) | 53| When the component is focused or not | The component responds to the custom keyboard shortcut as long as the window is focused. | – | 54| When a single keyboard shortcut is set, it can be canceled by setting the **value**, **keys**, or both of them to null in the **keyboardShortcut** API.<br>When multiple keyboard shortcuts are set, they cannot be canceled.| Canceling the custom keyboard shortcut settings | Button('button1').keyboardShortcut('',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[l])<br>Button('button3').keyboardShortcut('',[]) | 55| The independent pipeline sub-window and main window coexist | The focused window responds to the keyboard shortcut. | – | 56| Ctrl, Shift, or Alt key in the **keys** parameter of the **keyboardShortcut** API| Both the keys on the left or right sides of the keyboard work. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL, ModifierKey.ALT]) | 57| Character key in the **value** parameter of the **keyboardShortcut** API | The response is case-insensitive. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('A',[ModifierKey.CTRL]) | 58| Response to keyboard shortcuts | The component responds continuously to the keyboard shortcut when all the set keys are pressed. | – | 59| Hidden component<br> | The keyboard shortcut also works. | – | 60| Components in the disable state | The keyboard shortcut does not work. | – | 61| 1. The keyboard shortcut is the same as an existing one (including the system-defined ones).<br>2. The **value** parameter contains multiple character keys.<br>3. The **key** parameter has a duplicate modifier key.| In these cases, the keyboard shortcut is not added, and the previously added keyboard shortcuts still work. | Button('button1').keyboardShortcut('c',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('ab',[ModifierKey.CTRL])<br>Button('button3').keyboardShortcut('ab',[ModifierKey.CTRL,ModifierKey.CTRL]) | 62 63## System-defined Keyboard Shortcuts 64 65| Keyboard Shortcut | Component | 66| -------------- | ---------------------------------------- | 67| Ctrl + C | [Image](ts-basic-components-image.md), [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| 68| Ctrl+ A | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| 69| Ctrl+ V | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| 70| Ctrl+ X | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| 71| Shift + arrow keys | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| 72| Ctrl+ Shift+ Z | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| 73| Ctrl+ Z | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| 74| Ctrl+ Y | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| 75| Arrow keys and Enter key | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| 76| Tab key | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)| 77 78## Example 79 80Set a keyboard shortcut. You can then press the modifier key and accompanying key at the same time to trigger the component to respond to the shortcut and trigger the **onClick** event or other custom event. 81 82```ts 83// xxx.ets 84@Entry 85@Component 86struct Index { 87 @State message: string = 'Hello World' 88 89 build() { 90 Row() { 91 Column() { 92 Text(this.message) 93 Button("Test short cut 1").onClick((event) => { 94 this.message = "I clicked Button 1"; 95 console.log("I clicked 1"); 96 }).keyboardShortcut('.', [ModifierKey.SHIFT, ModifierKey.CTRL, ModifierKey.ALT]) 97 .onKeyEvent((event)=>{ 98 console.log("event.keyCode: " + JSON.stringify(event)); 99 }) 100 Button("Test short cut 2").onClick((event) => { 101 this.message = "I clicked Button 2"; 102 console.log("I clicked 2"); 103 }).keyboardShortcut('1', [ModifierKey.CTRL]) 104 Button("Test short cut 3").onClick((event) => { 105 this.message = "I clicked Button 3"; 106 console.log("I clicked 3"); 107 }).keyboardShortcut('A', [ModifierKey.SHIFT]) 108 Button("Test short cut 4").onClick((event) => { 109 this.message = "I clicked Button 4"; 110 console.log("I clicked 4"); 111 }).keyboardShortcut(FunctionKey.F5, [], () => { 112 this.message = "I clicked Button 4"; 113 console.log("I clicked user callback."); 114 }).keyboardShortcut(FunctionKey.F3, []) 115 } 116 .width('100%') 117 } 118 .height('100%') 119 } 120} 121``` 122