返回

软键盘带来的麻烦事，你是否也经历过？

前端

在移动端开发中，软键盘经常会给我们带来一些小麻烦。比如，当我们在使用二维码授权时，如果页面底部有绝对定位的元素，那么当软键盘弹起时，页面会收缩，导致绝对定位的元素被键盘遮挡。

为了解决这个问题，我们可以通过获取页面高度来判断软键盘是否弹起。如果页面高度发生变化，则说明软键盘弹起，此时我们可以将绝对定位的元素移动到键盘上方。

function adjustPosition() {
  const pageHeight = document.documentElement.clientHeight;
  const keyboardHeight = pageHeight - window.innerHeight;

  if (keyboardHeight > 0) {
    // 软键盘弹起
    const element = document.getElementById("qrcode");
    element.style.top = `${pageHeight - keyboardHeight - element.offsetHeight}px`;
  }
}

window.addEventListener("resize", adjustPosition);

除了二维码授权，软键盘还会给我们带来另一个问题：页面收缩。当软键盘弹起时，页面会收缩，导致一些内容被遮挡。

为了解决这个问题，我们可以使用 CSS 的 vh 单位。vh 单位相对于视口高度，当软键盘弹起时，视口高度不会发生变化，因此使用 vh 单位可以保证内容不会被遮挡。

.content {
  height: 100vh;
}

针对 iOS 系统，还有一种特殊的方案：监听 input 元素的 focus 和 blur 事件。当 input 元素获取焦点时，软键盘弹起，我们可以显示特定的元素；当 input 元素失去焦点时，软键盘收起，我们可以隐藏特定的元素。

const input = document.getElementById("input");

input.addEventListener("focus", () => {
  // 软键盘弹起
  const element = document.getElementById("special");
  element.style.display = "block";
});

input.addEventListener("blur", () => {
  // 软键盘收起
  const element = document.getElementById("special");
  element.style.display = "none";
});

以上就是移动端软键盘给我们带来的两个常见问题以及解决方法。希望这些方法能够帮助你解决在移动端开发中遇到的问题。