目录

Web组件焦点管理

开发者可利用Web组件的焦点管理功能，有效管理Web组件的获焦与失焦，同时利用H5端的W3C标准接口，管理网页界面上唯一可交互的元素获焦与失焦。

基础概念

Web组件焦点、焦点链和走焦的详情说明请参考ArkUI焦点基础概念。

Web组件走焦规范

根据走焦的触发方式，可以分为主动走焦和被动走焦，Web组件走焦规范详情参考ArkUI走焦规范。

[h2]主动走焦

指开发者或用户主观行为导致的焦点移动。包括：使用requestFocus申请焦点、外接键盘的按键走焦（Tab键/Shift+Tab键）、点击申请焦点（手势/鼠标/触摸板）等导致的焦点转移。

[h2]被动走焦

被动走焦指焦点因系统或其他操作而转移，无需开发者直接干预，是焦点系统的默认行为。

被动走焦的场景有：

Web组件与ArkUI组件焦点控制

示例：

  1. requestFocus接口允许应用开发者主动控制让Web组件获焦。
  2. onFocus和onBlur两个接口通常成对使用，来监听组件的焦点变化。
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%')
    }
  }
}

示例图1 组件获焦/失焦事件

通过requestFocus接口主动请求获焦，并监听通用接口onFocus和onBlur事件，改变Web组件边框颜色。

Web组件内H5元素焦点控制

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

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

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

在文档或对话框中，最多只能有一个元素具有 autofocus 属性。若应用于多个元素，第一个元素将获得焦点。

示例：

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文件。

<!-- 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>

示例图2 Web组件内元素焦点获焦/失焦事件

通过监听W3C接口focus和blur事件，改变输入背景色。