iOS键盘弹起时输入框被遮挡怎么解决？

这个问题确实挺头疼的，尤其是iOS设备的行为和Android不一样。根本原因是iOS在键盘弹起时会重新计算视口高度，而不是简单地压缩页面，所以像resize事件这种基于窗口变化的监听器经常会失效或者延迟。

咱们可以换个思路，用更稳定的方式解决这个问题。下面分几步来说：

---

### 1. 使用 window.addEventListener('keyboardWillShow')
虽然标准浏览器API没有直接提供键盘事件，但你可以借助第三方库（比如react-native的类似方案）或者原生监听iOS的键盘事件。不过这里我们用一个更通用的办法：监听键盘高度变化。

核心代码如下：

// 添加键盘显示/隐藏的监听

let keyboardHeight = 0; // 存储键盘高度



function adjustInputPosition(height) {

    const formContainer = document.querySelector('.form-container');

    if (formContainer) {

        // 动态设置底部间距，确保输入框不被遮挡

        formContainer.style.paddingBottom = ${height}px;

    }

}



// iOS键盘弹起时触发

window.addEventListener('focusin', (event) => {

    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {

        setTimeout(() => { // 等待键盘动画完成

            const delta = window.innerHeight - document.documentElement.clientHeight;

            keyboardHeight = delta > 0 ? delta : 0;

            adjustInputPosition(keyboardHeight);

        }, 100); // 根据实际需求调整延迟时间

    }

});



// 键盘收起时恢复

window.addEventListener('focusout', () => {

    adjustInputPosition(0); // 恢复默认样式

});

**解释一下**：
- focusin事件监听到输入框获取焦点时，键盘会弹起。我们通过计算innerHeight和clientHeight的差值得到键盘高度。
- 用setTimeout是因为键盘动画需要一定时间，如果立即调整可能会有闪烁或错位。
- adjustInputPosition函数动态修改.form-container的padding-bottom，确保输入框不会被遮挡。

---

### 2. 避免滚动冲突
如果你的页面本身是可滚动的，可能会出现键盘弹起时页面自动滚动到顶部的问题。这可以通过锁定滚动来解决：

function lockBodyScroll(lock) {

    const body = document.body;

    if (lock) {

        body.style.overflow = 'hidden';

        body.style.position = 'fixed';

        body.style.width = '100%';

    } else {

        body.style.overflow = '';

        body.style.position = '';

        body.style.width = '';

    }

}



// 键盘弹起时锁定滚动

window.addEventListener('focusin', () => {

    lockBodyScroll(true);

});



// 键盘收起时解锁滚动

window.addEventListener('focusout', () => {

    lockBodyScroll(false);

});

**原理**：通过给添加overflow: hidden和position: fixed，阻止页面滚动，同时保持视觉位置不变。

---

### 3. 优化CSS布局
你当前的弹性布局没问题，但为了兼容性更好，可以在.form-container上加上min-height和align-items，确保内容始终居中显示：

body {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    margin: 0; /* 清除默认margin */

}



.form-container {

    margin-top: auto; /* 弹性布局特性 */

    padding-bottom: 20px; /* 默认底部间距 */

    transition: padding-bottom 0.3s ease; /* 平滑过渡效果 */

}

**注意**：这里的transition是为了让动态调整padding-bottom时更加流畅，避免突兀感。

---

### 4. 测试与调整
最后别忘了在真机上测试（模拟器有时候会有偏差）。如果发现键盘高度计算不准，可能需要调整setTimeout的时间，或者结合具体的设备型号做适配。

---

### 总结
这个方案的核心是通过监听输入框焦点变化，动态调整容器的padding-bottom，同时锁定页面滚动防止冲突。相比resize事件，这种方式更加精准，也能兼容大多数iOS设备。

当然，如果项目允许，也可以考虑使用现成的插件（比如ionic框架提供的键盘管理工具），但自己写的话，上面的代码已经够用了。

希望这次能帮你彻底解决问题！