可能这些是你想要的H5软键盘兼容方案(小结)

前言 最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从实验过一些机型上看，发现主要存在以下问题： 在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差异，且页面 webview 表现不同。 在IOS12 上，微信版本 v6.7.4 及以上，输入框获取焦点，键盘弹起，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的。 在 IOS 上，使用第三方输入法，高度计算存在偏差，导致在有些输入法弹起，将输入框挡住一部分。 在开发H5聊天应用时，软键盘的兼容性问题是一个常见的挑战。特别是在Android和iOS平台上，由于系统的不同处理方式，会导致输入框与软键盘的交互出现各种问题。本文将总结几种针对这些问题的解决策略。 我们需要理解在不同平台软键盘的弹起和收起对页面的影响。在iOS上，当输入框获得焦点，键盘弹起时，页面不会改变其高度，而是整体向上滚动。而键盘收起时，页面并不会自动恢复到原来的滚动位置。在Android系统中，软键盘弹起会导致页面高度减少，相当于页面被压缩。而键盘收起时，页面高度会恢复，但仅限于用户触发键盘收起的动作，如点击键盘上的“收起”按钮。 为了监测软键盘的状态，我们可以利用JavaScript事件监听。在iOS上，我们可以通过监听输入框的`focus`事件来捕获键盘弹起，`blur`事件来检测键盘收起。而在Android中，由于页面高度的变化，我们可以监听`resize`事件来判断软键盘的状态。当页面高度变小，我们可以认为是软键盘弹起；反之，如果高度恢复，表示软键盘收起。 对于Android系统，由于第三方输入法可能导致高度计算不准确，我们需要找到更可靠的方法来获取正确的软键盘高度。这可能需要结合设备屏幕高度、可视区域高度以及用户交互事件等信息进行复杂计算。例如，可以记录键盘弹起前后的页面高度差来估算键盘高度。 在iOS12及以上版本的微信中，遇到的特殊问题是，键盘收起后页面不会回到原始位置，留下一片空白。为了解决这个问题，我们可以监听页面的滚动事件，并在键盘收起时，手动将页面滚动到正确的位置。这可能需要结合`window.pageYOffset`或`document.body.scrollTop`等属性进行调整。 对于某些浏览器中输入框被输入法遮挡的问题，可能需要利用CSS布局和定位技术来解决。例如，可以设置输入框的`position`为`fixed`或`absolute`，并根据软键盘的高度调整输入框的`bottom`值，确保它始终位于软键盘上方可见区域。 处理H5软键盘兼容问题需要对不同平台的特性有深入理解，以及熟练运用JavaScript和CSS技术。在实际项目中，可以创建一个跨平台的软键盘管理模块，统一处理键盘事件、高度计算和页面布局调整，以实现输入框与软键盘的完美适配。同时，考虑到未来可能的新系统或浏览器更新，代码应具备一定的可扩展性和灵活性，以适应不断变化的环境。