HarmonyOS Web组件加载H5，拉起软键盘遮挡输入框

拉起键盘web内容会上浮的，可参考这个demo

import webview from '@ohos.web.webview';
import window from '@ohos.window';

@Entry
@Component
export struct SubWindowPage {
  @State webViewVisibility: Visibility = Visibility.Visible;
  private pageWidth = 320;
  private pageHeight = 500;
  private controller: webview.WebviewController = new webview.WebviewController();
  @State flexAlign: FlexAlign = FlexAlign.Center
  @State screenHeight: number | string = '100%'

  aboutToAppear() {
    window.getLastWindow(getContext(this)).then(currentWindow => {
      // 监视软键盘的弹出和收起
      currentWindow.on('avoidAreaChange', async data => {
        let property = currentWindow.getWindowProperties();
        let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD);
        this.screenHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height);
      });
    })
  }


  build() {
    Stack() {
      Column() {
        Web({ src: $rawfile('index.html'), controller: this.controller })
          .javaScriptAccess(true)
          .fileAccess(false)
          .zoomAccess(false)
          .domStorageAccess(true)
          .onlineImageAccess(true)
          .horizontalScrollBarAccess(false)
          .verticalScrollBarAccess(false)
          .cacheMode(CacheMode.Online)
          .width(this.pageWidth)
          .width('100%')
          .height(this.pageHeight)
          .height('100%')
          .border({ radius: 6 })
          .visibility(this.webViewVisibility)
          .backgroundColor(Color.Pink)
      }
      .justifyContent(this.flexAlign)
      .alignItems(HorizontalAlign.Center)
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height(this.screenHeight)
    .backgroundColor('#999955')
    .alignContent(Alignment.Center)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.