H5 解决 iOS 输入框聚焦会把按钮顶上去的 Bug
在开发移动端网页应用时，我们常常会遇到一个常见的问题：当使用 iOS 系统的 Safari 浏览器时，用户点击输入框后，软键盘弹出，导致页面布局出现意外的变化，尤其是按钮可能被键盘顶上去，无法正常操作。这种情况在 h5 项目中尤其显著，如何优雅地解决这个 bug 成为开发者们需要面对的难题。
现象描述
当用户在 iOS 设备上点击输入框时，弹出的软键盘会推高页面内容，导致页面上方的按钮被遮挡。这个问题的根源在于 iOS 的浏览器处理页面布局的方式，用户体验受到影响。在这样的情况下，我们需要采取一些措施来修复这个问题。
解决方案
方案一：使用 JavaScript 监听输入框焦点事件
一种较为常见的解决方案是使用 JavaScript 监听输入框的 focus 和 blur 事件，根据输入框的状态动态调整页面布局。以下是一个简单的示例：
document.querySelectorAll('input').forEach(input => {
input.addEventListener('focus', () => {
document.body.classList.add('keyboard-open');
});
input.addEventListener('blur', () => {
document.body.classList.remove('keyboard-open');
});
});
在这个代码中，我们为所有输入框添加了事件监听器。当输入框聚焦时，我们给 body 添加一个类 keyboard-open，而在输入框失去焦点时则移除这个类。接下来，我们可以通过 CSS 为这个类控制按钮和其他元素的定位。
方案二：CSS 调整页面布局
结合上述 JavaScript 代码，我们可以在 CSS 中定义 keyboard-open 类的样式，使按钮位置适应键盘的弹出。示例如下：
body.keyboard-open {
height: calc(100vh - 200px); /* 预留出键盘高度 */
overflow: hidden; /* 防止页面溢出 */
}
通过这样的方式，当键盘弹出时，我们调整页面的 height 属性，给输入框和按钮留出空间，避免按钮被顶上去。
总结
通过JavaScript和CSS的巧妙结合，我们可以有效地解决 iOS 输入框聚焦时按钮被顶上的问题。这种方法不仅提高了用户体验，也确保了页面的美观性和功能性。下面是一张总结表，以供参考：
| 方法 | 描述 | 优缺点 |
|---|---|---|
| JavaScript | 监听输入框焦点，动态调整布局 | 有效，但需兼顾性能 |
| CSS调整 | 预留空间，避免遮挡 | 简单易用，适用性广 |
在实际开发中，我们可能还需要根据项目的具体需求进行更多的调整和优化。希望本文能够帮助开发者们更好地解决这一难题，提升页面的用户体验。
