iOS原生键盘遮挡input框的解决方案

2023-12-15 01:15:20

站在风口上，也还是会被遮挡——iOS原生键盘遮挡input输入框的解决方案

在移动端开发中，我们经常会遇到这样的问题：当我们在页面底部放置一个固定的input输入框时，在iOS设备上，当用户点击输入框时，原生键盘会弹出，并遮挡住输入框，导致用户无法输入内容。

造成iOS原生键盘遮挡input输入框的原因是，iOS的原生键盘在弹出时，会默认占用整个屏幕的高度。而此时，页面底部的input输入框还在原位，因此就被键盘遮挡住了。

网上有很多解决iOS原生键盘遮挡input输入框的方法，但大部分方法都存在一些问题。有部分人会用绝对定位来解决，但是这样做的话会导致input在安卓设备上产生抖动。或者使用固定定位，但是在iOS中会导致 input 始终在整个窗口最底部的 center，移动端固定定位效果不像 pc 端固定定位效果那么友好。

当然有人说使用百分比定位，比如设置body 和 input 输入框的 height：100vh; 理论上来说，如果设备高度无变化，是不会出现这样的情况。但是在这样的情况下，安卓设备会出现背景抖动；iOS则是会重定位整体页面，头部会随着键盘高度下降。

对此，笔者带来了“弹性布局定位”的解决方法，它能够完美地解决在iOS设备上，原生键盘弹出时，遮挡input输入框的问题。

步骤一、整体布局：

首先我们要确保整体的布局是正确的，主要有两种方式：

1.body 设置 height:100%;

2.body 设置 height: calc(100vh - 1px);

步骤二、键盘监测：

然后我们通过判断键盘的高度，来控制 input 距离底部的距离：

//获取页面键盘高度
let keyboardHeight = 0;
window.addEventListener('resize', () => {
// 获取键盘高度
  if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    keyboardHeight = clientHeight - scrollHeight;
    // 如果键盘高度发生变化，则更新input的top值
    if (keyboardHeight > 0) {
      // input输入框距离底部的距离
      const inputBottom = 10; // 单位 px
      const inputHeight = document.querySelector('input').offsetHeight;
      document.querySelector('input').style.top = `${window.innerHeight - keyboardHeight - inputHeight - inputBottom}px`;
    }
  }
});

步骤三、css 设置

最后，给 input 输入框设置如下样式：

input {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: calc(100% - 20px); // 宽度可以根据需要调整
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}