• 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>  - Container components that can gain focus, such as [Stack](ts-container-stack.md) and [Row](ts-container-row.md), are not focusable if they do not have any focusable child components. To make them focusable, you can add an **onClick** event or a tap gesture to the component. This makes the component implicitly focusable.
14>
15>  - For details about focus development and component focusability, see [Focus Event](../../../ui/arkts-common-events-focus-event.md).
16
17## onFocus
18
19onFocus(event: () => void)
20
21Triggered when the current component obtains focus.
22
23**Atomic service API**: This API can be used in atomic services since API version 11.
24
25**System capability**: SystemCapability.ArkUI.ArkUI.Full
26
27## onBlur
28
29onBlur(event:() => void)
30
31Triggered when the current component loses focus.
32
33**Atomic service API**: This API can be used in atomic services since API version 11.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37
38## Example
39
40This example demonstrates how components gain and lose focus. The colors of the buttons change when they gain or lose focus.
41
42```ts
43// xxx.ets
44@Entry
45@Component
46struct FocusEventExample {
47  @State oneButtonColor: string = '#FFC0CB'
48  @State twoButtonColor: string = '#87CEFA'
49  @State threeButtonColor: string = '#90EE90'
50
51  build() {
52    Column({ space: 20 }) {
53      // 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.
54      Button('First Button')
55        .backgroundColor(this.oneButtonColor)
56        .width(260)
57        .height(70)
58        .fontColor(Color.Black)
59        .focusable(true)
60        .onFocus(() => {
61          this.oneButtonColor = '#FF0000'
62        })
63        .onBlur(() => {
64          this.oneButtonColor = '#FFC0CB'
65        })
66      Button('Second Button')
67        .backgroundColor(this.twoButtonColor)
68        .width(260)
69        .height(70)
70        .fontColor(Color.Black)
71        .focusable(true)
72        .onFocus(() => {
73          this.twoButtonColor = '#FF0000'
74        })
75        .onBlur(() => {
76          this.twoButtonColor = '#87CEFA'
77        })
78      Button('Third Button')
79        .backgroundColor(this.threeButtonColor)
80        .width(260)
81        .height(70)
82        .fontColor(Color.Black)
83        .focusable(true)
84        .onFocus(() => {
85          this.threeButtonColor = '#FF0000'
86        })
87        .onBlur(() => {
88          this.threeButtonColor = '#90EE90'
89        })
90    }.width('100%').margin({ top: 20 })
91  }
92}
93```
94
95 ![focus](figures/focus.png)
96