• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 按键事件
2
3按键事件指组件与键盘、遥控器等按键设备交互时触发的事件,适用于所有可获焦组件,例如Button。对于Text,Image等默认不可获焦的组件,可以设置focusable属性为true后使用按键事件。
4
5>  **说明:**
6>
7>  从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
8
9
10
11## 事件
12
13| 名称                                       | 支持冒泡 | 功能描述                                     |
14| ---------------------------------------- | ---- | ---------------------------------------- |
15| onKeyEvent(event: (event?: KeyEvent) => void) | 是    | 绑定该方法的组件获焦后,按键动作触发该回调,event返回值见[KeyEvent](#keyevent对象说明)介绍。 |
16
17
18## KeyEvent对象说明
19
20| 名称                                    | 类型                                       | 描述                         |
21| ------------------------------------- | ---------------------------------------- | -------------------------- |
22| type                                  | [KeyType](ts-appendix-enums.md#keytype)  | 按键的类型。                     |
23| [keyCode](../apis/js-apis-keycode.md) | number                                   | 按键的键码。                     |
24| keyText                               | string                                   | 按键的键值。                     |
25| keySource                             | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。             |
26| deviceId                              | number                                   | 触发当前按键的输入设备ID。             |
27| metaKey                               | number                                   | 按键发生时元键(即Windows键盘的WIN键、Mac键盘的Command键)的状态,1表示按压态,0表示未按压态。 |
28| timestamp                             | number                                   | 按键发生时的时间戳。                 |
29| stopPropagation                       | () => void                               | 阻塞事件冒泡传递。                  |
30
31
32## 示例
33
34```ts
35// xxx.ets
36@Entry
37@Component
38struct KeyEventExample {
39  @State text: string = ''
40  @State eventType: string = ''
41
42  build() {
43    Column() {
44      Button('KeyEvent')
45        .onKeyEvent((event: KeyEvent) => {
46          if (event.type === KeyType.Down) {
47            this.eventType = 'Down'
48          }
49          if (event.type === KeyType.Up) {
50            this.eventType = 'Up'
51          }
52          this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText
53        })
54      Text(this.text).padding(15)
55    }.height(300).width('100%').padding(35)
56  }
57}
58```
59
60 ![keyEvent](figures/keyEvent.png)
61