android软键盘遮挡WebView中input的解决方案

最新推荐文章于 2025-07-07 11:55:22 发布

原创

最新推荐文章于 2025-07-07 11:55:22 发布 · 1.3w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#android #hybrid

在Android hybrid应用中，使用WebView加载HTML页面时，软键盘弹出可能会遮挡input元素。本文介绍了两种解决方案：1) 设置WebView调整大小，使页面整体缩小；2) 软键盘弹出时，WebView内容上移，保持更好的显示效果。第二种方案更受欢迎，因为它能提供与iOS一致的用户体验，并避免布局样式问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现象

在做hybrid应用时，我们用WebView来加载html页面，经常会出现软件盘弹出，遮挡了html中输入控件（如input）的问题。
无论你是用系统的原生WebView（从4.0-7.0），还是Crosswalk的XWalkView，都有这个问题！（用系统原生浏览器是没有这个问题的）
这里不得不吐槽一下，ios没有这个问题。

解决方案有以下几种：

软键盘弹出时WebView高度缩小。
软键盘弹出时，WebView内容适当上移。

个人比较喜欢第二个方案，因为：

与IOS体验一致
页面不需要重新布局，避免了有些页面在WebView高度缩小后，布局样式体验不好；

1 软键盘弹出时WebView高度缩小（网上大多数也都是说的这个方案）

设置页面adjustResize

android:windowSoftInputMode="adjustResize"

原理是软件盘弹出时，整个页面的大小都缩小了，软键盘不再遮挡WebView了，这个问题自然也就不存在了。

这个方案最简单。但有时不太好用，如果页面是上下有固定布局，中间滚动区域（如上标题栏，下方操作按钮，中间是可以滚动的信息输入区域）。点击中间滚动区域的输入框，软键盘弹出，会把底部布局也顶上去，导致中间滚动区域可能高度很小了，显示效果很差。一
一个办法是软键盘弹出时，底部布局隐藏。

window.addEventListener("resize", (v) => {
    this.LastWindowHeight = this.CurWindowHeight;
    this.CurWindowHeight = window.innerHeight;
    if ((this.LastWindowHeight - this.CurWindowHeight) /this.LastWindowHeigh