鸿蒙web组件适配H5中的输入框_鸿蒙嵌入h5页面触摸事件和输入框位置不匹配-CSDN博客

本文链接：https://blog.csdn.net/2504_92675651/article/details/149117073

鸿蒙Web组件适配H5输入框的技术实现

在鸿蒙应用开发中，Web组件（WebView）常用于加载H5页面。H5页面中的输入框（如<input>或<textarea>）可能因系统差异导致交互问题，需通过鸿蒙与JavaScript的通信机制实现适配。

Web组件基础配置

加载H5页面时需启用JavaScript支持并配置权限：

// ArkTS代码示例
import webview from '@ohos.web.webview';

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

  build() {
    Column() {
      Web({ src: "https://example.com", controller: this.controller })
        .javaScriptAccess(true)
        .fileAccess(true)
    }
  }
}

输入框聚焦问题处理

H5输入框可能因鸿蒙默认事件拦截无法正常聚焦。需通过注入JavaScript代码主动触发聚焦：

// ArkTS中注入JS代码
this.controller.runJavaScript(
  "document.querySelector('input').addEventListener('touchstart', function(e) { e.preventDefault(); this.focus(); })",
  (error) => {
    if (error) console.error("JS注入失败");
  }
);

对应H5页面需兼容处理：

<!-- H5页面示例 -->
<input type="text" id="mobileInput" style="font-size: 16px; height: 40px;" />

键盘弹出适配

鸿蒙系统键盘弹出可能遮挡输入框，需通过系统能力监听键盘事件：

import window from '@ohos.window';

// 获取窗口实例并监听键盘高度变化
window.getLastWindow(this.context).then((win) => {
  win.on("keyboardHeightChange", (height) => {
    this.controller.runJavaScript(
      `document.getElementById('mobileInput').style.marginBottom = '${height}px'`
    );
  });
});

双向通信实现

通过鸿蒙的WebMessagePort实现原生与H5的双向通信：

// ArkTS设置消息端口
const msgPort = this.controller.createWebMessagePort();
msgPort.onMessageEvent((event) => {
  const msg = event.getData();
  if (msg.type === "inputFocus") {
    // 处理输入框聚焦逻辑
  }
});

this.controller.postMessage("port", [msgPort], "*");

H5页面接收消息端口：

// H5 JavaScript代码
window.onmessage = (e) => {
  if (e.data === "port") {
    const port = e.ports[0];
    port.postMessage({type: "inputFocus"});
  }
};

输入法样式优化

通过CSS适配鸿蒙输入法特性：

/* H5页面CSS */
input {
  -webkit-user-select: auto;
  user-select: auto;
  ime-mode: active;
  font-size: 16px;
  line-height: 1.5;
}

完整示例代码整合

ArkTS组件完整实现：

@Entry
@Component
struct WebInputDemo {
  controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {
    this.setupKeyboardListener();
  }

  setupKeyboardListener() {
    window.getLastWindow(this.context).then((win) => {
      win.on("keyboardHeightChange", (height) => {
        this.adjustInputPosition(height);
      });
    });
  }

  adjustInputPosition(height: number) {
    this.controller.runJavaScript(
      `const input = document.querySelector('input');
       input.style.transform = 'translateY(-${height}px)';
       input.scrollIntoView({behavior: 'smooth'});`
    );
  }

  build() {
    Column() {
      Web({ src: "local://page.html", controller: this.controller })
        .javaScriptAccess(true)
        .onPageEnd(() => {
          this.injectFocusScripts();
        })
    }
  }

  injectFocusScripts() {
    const jsCode = `
      InputFocusHelper = {
        setup: function() {
          document.addEventListener('focusin', (e) => {
            window.ohos.postMessage({type: 'inputFocus'});
          });
        }
      };
      InputFocusHelper.setup();
    `;
    this.controller.runJavaScript(jsCode);
  }
}

H5页面示例（page.html）：

<!DOCTYPE html>
<html>
<head>
  <style>
    input { width: 100%; padding: 12px; box-sizing: border-box; }
  </style>
</head>
<body>
  <input type="text" placeholder="请输入内容">
  <script>
    window.ohos = {
      postMessage: (data) => window.parent.postMessage(data, '*')
    };
  </script>
</body>
</html>