HarmonyOS web中h5中的input聚焦时 弹起键盘能否自动上推页面？

Question

如题：HarmonyOS web中h5中的input聚焦时 弹起键盘能否自动上推页面？

Answer 1

可使用以下替代方案：

import webview from '@ohos.web.webview'
import { KeyboardAvoidMode } from '@kit.ArkUI';
import window from '@ohos.window';
@Entry @Component struct B {
  @State scrollHeight: number = 0;
  controller: webview.WebviewController = new webview.WebviewController();
  aboutToAppear() {
    window.getLastWindow(getContext(this)).then(currentWindow => {
      currentWindow.on('avoidAreaChange', async data => {
        //判断规避区是否是软键盘区域。
        if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) { return; }
        //规避区的高度。
        this.scrollHeight = px2vp(data.area.bottomRect.height);
      })
    })
  };
  build() {
    Column() {
      Blank() .height(44) .color(Color.Red)
      Web({ src: 'https://xxx', controller: this.controller })
        .width('100%')
        .layoutWeight(1)
          //手动改变bottom值
        .margin({ bottom: this.scrollHeight })
        .animation({curve: Curve.EaseOut, duration: 300}) }
    .width("100%")
    .height("100%") } }

以上提供的示例就是通过监听规避区域的高度，后动态改变web的底部边距来解决web中输入框被遮挡的问题。