HarmonyOS 鸿蒙Next webview 里边的输入框，拉起自定义键盘时自定义键盘覆盖输入框问题如何解决

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://webxxxxxx',
        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%')
  }
}

更多关于HarmonyOS 鸿蒙Next webview 里边的输入框，拉起自定义键盘时自定义键盘覆盖输入框问题如何解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，针对Next webview里的输入框拉起自定义键盘时键盘覆盖输入框的问题，可以通过调整布局和窗口参数来解决。

一种常见的做法是利用鸿蒙系统的窗口管理能力，动态调整webview所在页面的布局，确保输入框在键盘弹出时不会被遮挡。这通常涉及到监听键盘的显示和隐藏事件，并据此调整页面布局或输入框的位置。

具体来说，你可以在webview的容器布局中设置适当的边距或填充，以便在键盘出现时为输入框留出空间。此外，也可以尝试使用鸿蒙提供的窗口属性，如softInputMode，来指定当软键盘显示时页面应该如何调整。例如，可以将softInputMode设置为adjustResize，这样系统会在键盘弹出时自动调整布局大小，以避免输入框被覆盖。

如果上述方法仍然无法解决问题，可能需要进一步检查webview的嵌套层级和布局参数，确保没有其他视图层或布局属性干扰了键盘的显示和输入框的可见性。

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

回到顶部