HarmonyOS开发者社区

【背景知识】

keyboardAvoidMode：Web组件的属性，用于设置软键盘避让模式。

【解决方案】

可尝试设置Web组件的keyboardAvoidMode属性，以避免键盘遮挡输入区域。

参考以下Demo：

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
import { window } from '@kit.ArkUI';

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

  aboutToAppear(): void {
    try {
      webview.WebviewController.setWebDebuggingAccess(true);

    } catch (error) {
      console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
    }
  }

  //监听键盘高度
  private listenKeyboard() {
    window.getLastWindow(getContext(this)).then(currentWindow => {
      //监听键盘高度，处理工具条偏移量
      currentWindow.on('keyboardHeightChange', (data) => {
        let keyboardHeight = Math.floor(px2vp(data));
        if (keyboardHeight > 0) {
          //键盘编辑态，偏移量 = 键盘高度
          this.toolOff = keyboardHeight
        } else {
          //无键盘编辑态，安全区高度
          this.toolOff = 0
        }
      })
    })
  }

  build() {
    Stack() {
      Column() {
        Web({ src: 'www.***.com', controller: this.controller })
          .javaScriptAccess(true)
          .fileAccess(true)
          .domStorageAccess(true)
          .geolocationAccess(true)
          .cacheMode(CacheMode.Default)
          .zoomAccess(false)
          .mixedMode(MixedMode.All)
          .multiWindowAccess(true)
          .darkMode(WebDarkMode.Auto)
          .allowWindowOpenMethod(true)
          .onControllerAttached(() => {

          })
          .blurOnKeyboardHideMode(BlurOnKeyboardHideMode.BLUR)
          .keyboardAvoidMode(WebKeyboardAvoidMode.RESIZE_VISUAL)
          .onFirstContentfulPaint(() => {
            this.listenKeyboard();
          })

        //编辑态避让区
        Blank()
          .opacity(0.5)
          .width('100%')
          .height(this.toolOff)
      }
    }
  }
}

更多软键盘避让功能开发指南参考：Web组件对接软键盘。