360浏览器文本框聚焦时软键盘遮罩解决方案

在文档中，作者探讨了在Android设备上使用360浏览器时遇到的问题，即当文本框获得焦点后，360浏览器的软键盘会遮盖文本框，导致用户无法正常输入。这个问题主要出现在360浏览器特有的软键盘设计下，这种键盘不会占用主活动窗口的空间，而是悬浮在页面底部，导致文本框被遮挡。 作者首先介绍了项目背景，需求是在点击筛选按钮后弹出一个固定层，并在输入框获取焦点时显示软键盘。通过在不同浏览器上的测试，确认了360浏览器的软键盘行为与其他浏览器有所不同。根据分析，360浏览器采用的是软键盘不调整窗口大小而保持浮在屏幕底部的方式。 针对这个情况，作者提出了解决方案，主要包括以下步骤： 1. 使用JavaScript检测是否为360浏览器（通过`navigator.userAgent`判断）。 2. 当输入框获取焦点时，动态调整固定层的位置，使其向上移动以避免被键盘遮挡。 3. 输入完成或键盘关闭时，恢复固定层的位置。 4. 由于360浏览器不支持屏幕自动旋转，这简化了问题的处理。 代码实现部分展示了如何通过监听键盘事件（`keydown`和`keyup`）以及输入框的`focus`事件来动态调整固定层的CSS样式，确保文本框始终可见。通过这种方法，开发者可以确保在360浏览器上实现预期的用户体验，即使在软键盘弹出时也能正常输入。 文档的核心知识点在于理解并解决特定浏览器（360浏览器）下的软键盘遮挡问题，通过编程手段调整页面布局来适应不同浏览器的行为。这对于开发人员来说是一项重要的兼容性考量，尤其是在处理跨浏览器的Web应用时。