• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Focus Event
2
3A focus event is triggered when the page focus moves between components. It can be used to process related logic within the component.
4
5>  **NOTE**
6>
7>  - The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8>
9>  - Currently, only the Tab button and arrow buttons on the external keyboard can be used to trigger the focus event. Sequential keyboard navigation is not supported for nested scrollable components.
10>
11>  - Components that have default interaction logic, such as [Button](ts-basic-components-button.md) and [TextInput](ts-basic-components-textinput.md), are focusable by default. Other components, such as [Text](ts-basic-components-text.md) and [Image](ts-basic-components-image.md), are not focusable by default. Only focusable components can trigger a focus event. To enable a component to be focusable, set its **focusable** attribute to **true**.
12>
13>  - For details about focus development, see [Focus Event](../../../ui/arkts-common-events-focus-event.md).
14
15## onFocus
16
17onFocus(event: () => void)
18
19Triggered when the current component obtains focus.
20
21**Atomic service API**: This API can be used in atomic services since API version 11.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25## onBlur
26
27onBlur(event:() => void)
28
29Triggered when the current component loses focus.
30
31**Atomic service API**: This API can be used in atomic services since API version 11.
32
33**System capability**: SystemCapability.ArkUI.ArkUI.Full
34
35
36## Example
37
38This example demonstrates how components gain and lose focus. The colors of the buttons change when they gain or lose focus.
39
40```ts
41// xxx.ets
42@Entry
43@Component
44struct FocusEventExample {
45  @State oneButtonColor: string = '#FFC0CB'
46  @State twoButtonColor: string = '#87CEFA'
47  @State threeButtonColor: string = '#90EE90'
48
49  build() {
50    Column({ space: 20 }) {
51      // You can use the up and down arrow keys on an external keyboard to move the focus between the three buttons. When a button gains focus, its color changes. When it loses focus, its color changes back.
52      Button('First Button')
53        .backgroundColor(this.oneButtonColor)
54        .width(260)
55        .height(70)
56        .fontColor(Color.Black)
57        .focusable(true)
58        .onFocus(() => {
59          this.oneButtonColor = '#FF0000'
60        })
61        .onBlur(() => {
62          this.oneButtonColor = '#FFC0CB'
63        })
64      Button('Second Button')
65        .backgroundColor(this.twoButtonColor)
66        .width(260)
67        .height(70)
68        .fontColor(Color.Black)
69        .focusable(true)
70        .onFocus(() => {
71          this.twoButtonColor = '#FF0000'
72        })
73        .onBlur(() => {
74          this.twoButtonColor = '#87CEFA'
75        })
76      Button('Third Button')
77        .backgroundColor(this.threeButtonColor)
78        .width(260)
79        .height(70)
80        .fontColor(Color.Black)
81        .focusable(true)
82        .onFocus(() => {
83          this.threeButtonColor = '#FF0000'
84        })
85        .onBlur(() => {
86          this.threeButtonColor = '#90EE90'
87        })
88    }.width('100%').margin({ top: 20 })
89  }
90}
91```
92
93 ![focus](figures/focus.png)
94