目录

Managing Focus

Developers can use the focus management capability of the Web component to effectively manage focus gain and focus loss of the Web component, and use the W3C standard APIs on the H5 side to manage focus gain and focus loss of the only interactive element on the web page.

Basic Concepts

For details about the focus, focus chain, and focus navigation of the Web component, see Basic Concepts of ArkUI Focus.

Focus Traversal Guidelines

Focus traversal can be divided into active and passive based on how it is triggered. For details, see Focus Traversal Guidelines.

[h2]Active Focus Traversal

Refers to focus movement initiated by deliberate actions, such as keyboard shortcuts (Tab or Shift+Tab) and clicks or touches through (the gesture, mouse, or touchpad).

[h2]Passive Focus Traversal

Passive focus traversal occurs when the focus automatically shifts due to system actions or other operations without manual intervention, reflecting the default behavior of the focus system.

Passive focus traversal occurs in the following scenarios:

Controlling the Focus of the Web Component and ArkUI Component

Example

  1. Use the requestFocus API to allow the Web component to proactively obtain the focus.
  2. The onFocus and onBlur APIs are usually used in pairs to listen for the focus changes of the component.
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  controller2: webview.WebviewController = new webview.WebviewController();
  @State webBorderColor: Color = Color.Red;
  @State webBorderColor2: Color = Color.Red;

  build() {
    Column() {
      Row() {
        Button('web1 requestFocus')
          .onClick(() => {
            try {
              this.controller.requestFocus();
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          });
        Button('web2 requestFocus')
          .onClick(() => {
            try {
              this.controller2.requestFocus();
            } catch (error) {
              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
            }
          });
      }
      Web({ src: 'www.example.com', controller: this.controller })
        .onFocus(() => {
          this.webBorderColor = Color.Green;
        })
        .onBlur(() => {
          this.webBorderColor = Color.Red;
        })
        // ···
        .margin(3)
        .borderWidth(10)
        .borderColor(this.webBorderColor)
        .height('45%')

      Web({ src: 'www.example.com', controller: this.controller2 })
        .onFocus(() => {
          this.webBorderColor2 = Color.Green;
        })
        .onBlur(() => {
          this.webBorderColor2 = Color.Red;
        })
        .margin(3)
        .borderWidth(10)
        .borderColor(this.webBorderColor2)
        .height('45%')
    }
  }
}

Figure 1 Component focus gain/loss events

Use requestFocus to request focus, and change the border color of the Web component by listening for the onFocus and onBlur events.

Controlling the Focus of HTML5 Elements in the Web Component

addEventListener("focus", (event) => {});

onfocus = (event) => {};
addEventListener("blur", (event) => {});

onblur = (event) => {};
<input name="q" autofocus />

In 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.

Example

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('test.html'), controller: this.controller })
    }
  }
}

HTML file to be loaded:

<!-- test.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
  <form id="form">
    <input type="text" placeholder="text input" />
    <input type="password" placeholder="password" />
  </form>
</body>
<script>
const form = document.getElementById("form");

form.addEventListener(
  "focus",
  (event) => {
    event.target.style.background = "pink";
  },
  true,
);

form.addEventListener(
  "blur",
  (event) => {
    event.target.style.background = "";
  },
  true,
);
</script>
</html>

Example 2 focus/blur events

Change the input background color by listening for the W3C focus and blur events.