HarmonyOS 鸿蒙Next webview 里的输入框被键盘覆盖

发布于 1周前 作者 caililin 来自 鸿蒙OS

HarmonyOS 鸿蒙Next webview 里的输入框被键盘覆盖

webview 里页面下方的输入框被键盘覆盖,页面没有顶起来

2 回复
检查下网页是否设置了固定高度或者其他固定布局的样式,导致上面的元素无法被抬起

可以通过获取键盘避让区域的高度,添加到web组件底部距离上,手动抬起web组件,demo如下:

import webview from '@ohos.web.webview'

import { KeyboardAvoidMode } from ‘@kit.ArkUI’;

import window from ‘@ohos.window’;

@Entry

@Component

struct B {

  @State scrollHeight: number = 40;

  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)+40;

      })

    })

  };

  build() {

    Column() {

      Text(‘客服’).height(55)

      Web({

        src: https://web.cupdata.com/CMBANK/pub/innerMBank0417.do?method=newOnlineService&bankCode=0417,

        controller: this.controller

      })

        .domStorageAccess(true)

        .onlineImageAccess(true)

        .imageAccess(true)

        .zoomAccess(false)

        .javaScriptAccess(true)

          //手动改变bottom值

        .margin({ bottom: this.scrollHeight })

        .animation({curve: Curve.EaseOut, duration: 300})

    }.width(‘100%’)

  }

}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

针对HarmonyOS鸿蒙Next webview里的输入框被键盘覆盖的问题,这通常是由于软键盘弹出时未正确调整页面布局所致。以下是一些解决方案:

  1. 设置软键盘自适应:在webview所在的页面或Activity中,可以尝试设置软键盘自适应。在鸿蒙系统中,可以通过this.getWindow().setInputPanelDisplayType(WindowManager.LayoutConfig.INPUT_ADJUST_PAN);来实现,该设置会使输入框在软键盘弹出时自动上移。
  2. 监听窗口尺寸变化:通过监听窗口尺寸变化来判断软键盘是否弹出,并据此调整页面布局。可以在webview所在的页面中添加window.onresize事件监听器,当窗口尺寸变化时,判断是否为软键盘弹出,并滚动页面使输入框可见。

如果上述方法未能解决问题,可能是由于webview的特殊性质或鸿蒙系统的特定版本导致的。此时,建议检查webview的嵌入方式及鸿蒙系统的版本更新,或者尝试调整webview的相关设置。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部