键盘遮挡H5输入框解决方案：再见输入框兼容问题

2023-12-17 22:49:36

在开发H5活动界面的过程中，不可避免的要用到输入框。然而，很多前端开发人员对输入框在移动端的兼容性问题感到头疼。由于不同设备和浏览器的差异，输入框在移动端的表现可能千差万别。其中，最常见的问题之一就是键盘遮挡输入框，导致用户无法输入内容。

本文将介绍一种有效的解决方案来解决键盘遮挡H5输入框的问题。这种解决方案基于fixed和绝对定位。通过将输入框定位为fixed，并将其置于键盘之上，可以保证输入框始终处于可视区域内。

解决方案步骤

为输入框添加fixed定位。

input {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

为键盘添加绝对定位。

.keyboard {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
}

在键盘弹起时调整输入框的位置。

document.addEventListener('keyboardWillShow', function() {
  var input = document.querySelector('input');
  input.style.bottom = '250px';
});

document.addEventListener('keyboardWillHide', function() {
  var input = document.querySelector('input');
  input.style.bottom = '0';
});

示例代码

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <input type="text" placeholder="请输入内容">
  <div class="keyboard">
    <!-- 键盘内容 -->
  </div>

  <script>
    document.addEventListener('keyboardWillShow', function() {
      var input = document.querySelector('input');
      input.style.bottom = '250px';
    });

    document.addEventListener('keyboardWillHide', function() {
      var input = document.querySelector('input');
      input.style.bottom = '0';
    });
  </script>
</body>
</html>