Key Event

A key event is triggered when a focusable component, such as <Button>, interacts with a keyboard, remote control, or any other input device with keys. To use a key event for components that are not focusable by default, such as <Text> and <Image>, first set their focusable attribute to true.

NOTE

The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Events

Name	Bubbling Supported	Description
onKeyEvent(event: (event?: KeyEvent) => void)	Yes	Triggered when a key event occurs. For details about event, see KeyEvent.

KeyEvent

Name	Type	Description
type	KeyType	Key type.
keyCode	number	Key code.
keyText	string	Key value.
keySource	KeySource	Type of the input device that triggers the key event.
deviceId	number	ID of the input device that triggers the key event.
metaKey	number	State of the metakey (that is, the WIN key on the Windows keyboard or the Command key on the Mac keyboard) when the key is pressed. The value 1 indicates the pressed state, and 0 indicates the unpressed state.
timestamp	number	Timestamp when the key is pressed.
stopPropagation	() => void	Stops the event from bubbling upwards or downwards.

Example

// xxx.ets
@Entry
@Component
struct KeyEventExample {
  @State text: string = ''
  @State eventType: string = ''

  build() {
    Column() {
      Button('KeyEvent')
        .onKeyEvent((event: KeyEvent) => {
          if (event.type === KeyType.Down) {
            this.eventType = 'Down'
          }
          if (event.type === KeyType.Up) {
            this.eventType = 'Up'
          }
          this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText
        })
      Text(this.text).padding(15)
    }.height(300).width('100%').padding(35)
  }
}

keyEvent