1# Managing Focus 2 3The **Web** component provides the focus management functionality for you to effectively manage the focus and defocus of the **Web** component. In addition, you can use the W3C standards-compliant API on the HTML5 side to manage the focus and defocus of the only interactive element on the Web page. 4 5- Application scenarios of common APIs for controlling the focus of the **Web** component and ArkUI component: 6 7 1. Use **requestFocus** to request the focus for a **Web** component: When an application has multiple components, you can use [requestFocus](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#requestfocus) of the **Web** component to move the focus to the **Web** component. 8 2. Change the **Web** component style based on the focus state: The component listens for focus event to modify the component style, such as the border and background color. This provides visual and interactive feedback. 9 10- Application scenarios of common APIs for controlling the focus of the HTML5 element in the **Web** component: 11 12 1. Use the **tabindex** attribute to manage the element focus: You can define the focus sequence of elements in the **Web** component through the **tabindex** attribute. For example, by setting it to **-1**, you can focus the element through the script and control the visibility of the element in CSS. 13 2. Update the focus position based on keyboard events: Listen for keyboard events, such as the **Tab** key, so that the focus position can be updated based on user operations. 14 3. Change the element style in the Web component based on the focus state: Add styles, such as the border and background color, to the focus element to provide visual and interaction feedback. 15 16## Basic Concepts 17For details about the focus, focus chain, and focus navigation of the **Web** component, see [Basic Concepts of ArkUI Focus](../ui/arkts-common-events-focus-event.md#basic-concepts). 18 19- Focus: 20 - Component focus: unique interactive element on the current application UI. 21 - Element focus: unique interactive element on the current web page. 22- Focus navigation: 23 - Focus navigation: refers to the behavior of focus shifting between components in an application. This process is transparent to the user but can be monitored through **onFocus** and **onBlur** events. 24 - Element focus navigation: refers to the behavior of focus shifting between elements on a web page. This behavior complies with the W3C standard. You can obtain the changes by listening for the **focus** (triggered when the element obtains the focus) and **blur** (triggered when the element loses the focus) events. 25 26## Focus Traversal Guidelines 27Focus traversal can be divided into active and passive based on how it is triggered. For details, see [Focus Traversal Guidelines](../ui/arkts-common-events-focus-event.md#focus-traversal-guidelines). 28 29### Active Focus Traversal 30Active focus traversal refers to focus movement initiated by deliberate actions, such as keyboard shortcuts (Tab, Shift+Tab) and clicks/touches (gesture, mouse, or touchpad). 31 32- requestFocus 33 34 Moves focus to a specific component. For details, see [Controlling the Focus of the Web Component and ArkUI Component](./web-focus.md#controlling-the-focus-of-the-web-component-and-arkui-component). 35 36- Keyboard traversal 37 38 - Supports focus traversal between the **Web** component and other components through the **TAB** and **Shift+TAB** keys. 39 - Supports focus traversal among ArkWeb page elements through the **TAB** and **Shift+TAB** keys. After the focus traversal of page elements, ArkUI continues the focus traversal in the framework. 40 41- Click/Touch for focus 42 43 Users can use gestures, the mouse, or touchpad to click/touch a **Web** component to obtain the focus. Elements in the **Web** component can also be focused when being clicked/touched. For example, an input box in a web page can be clicked/touched to change from a non-editable state to an editable state and activate the input method. 44 45### Passive Focus Traversal 46Passive focus traversal occurs when the focus automatically shifts due to system actions or other operations without developer intervention, reflecting the default behavior of the focus system. 47 48Passive focus traversal occurs in the following scenarios: 49 50- Component removal: If a focused **Web** component is removed, the system tries to shift focus to the next available sibling, following a back-to-front order. If no components at the same level are focusable, focus is released to the parent component. 51 52- Attribute change: Changing a component's **focusable** or **enabled** to **false**, or **visibility** to invisible causes the system to automatically move focus to another focusable component, using the same method as for component removal. 53 54- Invisible **Web** components: In scenarios such as application foreground and background switchover, page switchover, and navigation, a focused **Web** component will lose focus and be focused again. 55 56- Web page loading: When the **Web** component loads a web page through **src**, **loadUrl**, and **loadData**, the focus is obtained by default. However, if the **Web** component is not focusable, the focus fails to be obtained. The common causes are as follows: The parent component cannot be focused during the animation. The **Web** component or its parent component is set to be not focusable on the application side. The application can call [requestFocus](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#requestfocus) to obtain the focus again. When the focus is obtained successfully, the **onFocus** and **w3c focus** events on the application side are reported. 57 58- **autofocus**: Elements with the **autofocus** style are focused by default after web pages are loaded. If the element supports text input, the cursor blinks in the text box, but the soft keyboard is not displayed. For details about how to automatically display the soft keyboard, see [Automatically Displaying the Soft Keyboard](web-docking-softkeyboard.md#automatically-displaying-the-soft-keyboard). 59 60 61- Menu display: By default, the ArkUI component with the **overlay** attribute is focused. When the **Web** component is used together with this type of component such as [menu](../reference/apis-arkui/arkui-ts/ts-basic-components-menu.md), [datepicker](../reference/apis-arkui/arkui-ts/ts-basic-components-datepicker.md), [timepicker](../reference/apis-arkui/arkui-ts/ts-basic-components-timepicker.md), drop-down list box, and dialog box, the **Web** component loses focus. 62 63## Controlling the Focus of the Web Component and ArkUI Component 64 65- [onFocus](../reference/apis-arkui/arkui-ts/ts-universal-focus-event.md#onfocus): common focus obtaining callback API on the application side. When a component bound to this API is focused, the callback responses. 66- [onBlur](../reference/apis-arkui/arkui-ts/ts-universal-focus-event.md#onblur): common defocus callback API on the application side. When a component bound to this API loses focus, the callback responses. 67- To enable the component to proactively obtain focus, invoke the [requestFocus](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#requestfocus) API on the application side. 68- To set whether a **Web** component can obtain the focus, set the [focusable](../reference/apis-arkui/arkui-ts/ts-universal-attributes-focus.md#focusable) attribute. The **Web** component can obtain the focus by default. 69 70**Example** 711. Use the **requestFocus** API to allow the **Web** component to proactively obtain the focus. 722. The **onFocus** and **onBlur** APIs are usually used in pairs to listen for the focus changes of the component. 73 74```ts 75// xxx.ets 76import { webview } from '@kit.ArkWeb'; 77import { BusinessError } from '@kit.BasicServicesKit'; 78 79@Entry 80@Component 81struct WebComponent { 82 controller: webview.WebviewController = new webview.WebviewController(); 83 controller2: webview.WebviewController = new webview.WebviewController(); 84 @State webborderColor: Color = Color.Red; 85 @State webborderColor2: Color = Color.Red; 86 87 build() { 88 Column() { 89 Row() { 90 Button('web1 requestFocus') 91 .onClick(() => { 92 try { 93 this.controller.requestFocus(); 94 } catch (error) { 95 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 96 } 97 }); 98 Button('web2 requestFocus') 99 .onClick(() => { 100 try { 101 this.controller2.requestFocus(); 102 } catch (error) { 103 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 104 } 105 }); 106 } 107 Web({ src: 'www.example.com', controller: this.controller }) 108 .onFocus(() => { 109 this.webborderColor = Color.Green; 110 }) 111 .onBlur(() => { 112 this.webborderColor = Color.Red; 113 }) 114 .margin(3) 115 .borderWidth(10) 116 .borderColor(this.webborderColor) 117 .height("45%") 118 119 Web({ src: 'www.example.com', controller: this.controller2 }) 120 .onFocus(() => { 121 this.webborderColor2 = Color.Green; 122 }) 123 .onBlur(() => { 124 this.webborderColor2 = Color.Red; 125 }) 126 .margin(3) 127 .borderWidth(10) 128 .borderColor(this.webborderColor2) 129 .height("45%") 130 } 131 } 132} 133``` 134Figure 1 **onFocus**/**onBlur** events 135 136Use **requestfocus** to request focus, and change the border color of the **Web** component by listening for the **onFocus** and **onBlur** events. 137 138 139 140## Controlling the Focus of HTML5 Elements in the Web Component 141- Use the **focus** event of the W3C standards to detect whether an element is focused on a web page. 142``` 143addEventListener("focus", (event) => {}); 144 145onfocus = (event) => {}; 146``` 147- Use the **blur** event of the W3C standards to detect whether an element loses focus on a web page. 148``` 149addEventListener("blur", (event) => {}); 150 151onblur = (event) => {}; 152``` 153- Use W3C **autofocus** to focus an element when the page is loaded or the **dialog** to which the element belongs is displayed. 154``` 155<input name="q" autofocus /> 156``` 157In a document or dialog box, only one element can have the **autofocus** attribute. If you apply this attribute to multiple elements, the first element will be focused. 158 159**Example** 160```ts 161// xxx.ets 162import { webview } from '@kit.ArkWeb'; 163import { BusinessError } from '@kit.BasicServicesKit'; 164 165@Entry 166@Component 167struct WebComponent { 168 controller: webview.WebviewController = new webview.WebviewController(); 169 170 build() { 171 Column() { 172 Web({ src: $rawfile("test.html"), controller: this.controller }) 173 } 174 } 175} 176``` 177 178```js 179// test.html 180<!DOCTYPE html> 181<html> 182<head> 183<meta charset="utf-8"> 184<title>test</title> 185</head> 186<body> 187 <form id="form"> 188 <input type="text" placeholder="text input" /> 189 <input type="password" placeholder="password" /> 190 </form> 191</body> 192<script> 193const form = document.getElementById("form"); 194 195form.addEventListener( 196 "focus", 197 (event) => { 198 event.target.style.background = "pink"; 199 }, 200 true, 201); 202 203form.addEventListener( 204 "blur", 205 (event) => { 206 event.target.style.background = ""; 207 }, 208 true, 209); 210</script> 211</html> 212``` 213 214Example 2 **focus**/**blur** events 215 216Change the input background color by listening for the W3C **focus** and **blur** events. 217 218 219
