如何防止移动键盘在文本字段上升高页脚？

Question

我的页脚有问题。 我希望页脚留在屏幕底部，但有一个小问题。 使用移动浏览器时，打开键盘时某些字段会被页脚挡住。 页脚高出键盘并挡住您正在输入的字段。如何将页脚保持在底部并防止它高出键盘？ 我希望它隐藏在键盘下方。

我正在使用引导程序，但我在自己的 CSS 中设置了以下内容：

footer {
 width: 100%;
 position:absolute;
 left:0px;
 bottom:0px;
 height: 40px;
 margin: auto;
 overflow: hidden;
 background:#2E2E2E;
 text-align:center;
 line-height: 15px;
 color: #fff;

}

<html>
 <body>
  <div class="container">
  </div>
  <footer class="bs-footer" role="contentinfo">
 </body>
</html>

正如你在这里看到的。 当我激活字段“Salasana”时，页脚会上升并挡住文本字段。

打开键盘前：

打开键盘后：

Answer 1

使用 avinash 帮助解决了问题。 我最终在我的 CSS 中更改了以下内容。 由于我在容器 div 内拥有所有内容，因此我将容器高度设为 100% - 页脚。 我还从页脚中删除了底部：0px。

footer{
 position: relative;
}
html,body {
    height: 100%; /* Needed for container's min-height  */  
}

.container{
    min-height:100%;
    margin-bottom: -40px; /* Put negative height of the footer here */
    padding-bottom: 40px; /* Put height of the footer here. Needed for higher than screen height pages */
}

Answer 2

我发现在 StackOverflow上发布的解决方案非常有用。 它包含一个 javascript 片段，为我解决了这个问题，粘贴在下面；

if(/Android [4-6]/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
      if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
         window.setTimeout(function() {
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}

Answer 3

尝试使用位置：相对或固定

如果您希望页脚位于底部，则应将 min-height 添加到 body

Answer 4

如果您不想更改 html 代码，可以尝试使用 JS 解决此问题。

我们从顶部获取当前位置，设置顶部样式值，并重置底部值。

var fixed = document.querySelector(".fixed"),
    distanceFromTop = fixed.getBoundingClientRect().top;
fixed.style.top = distanceFromTop + 'px';
fixed.style.bottom = 'auto';

Answer 5

对于固定位置的页脚，我相对于顶部而不是底部定位它：

footer {
  position: fixed;
  height: 40px;
  top: calc(100vh - 40px);
  /* bottom: 0; */
}

Answer 6

我将use-detect-keyboard-open与 React 一起使用，效果很好。

Answer 7

我将 window.innerHeight 存储在输入焦点上，并在输入模糊时重置高度。

document.addEventListener('focusin', function (e) {
    if (isInputElement(e.target)) {
        document.body.style.height = window.innerHeight + 'px';
    }
})

document.addEventListener('focusout', function (e) {
    if (isInputElement(e.target)) {
        document.body.style.height = '100%';
    }
})

function isInputElement(ele) {
    return ele &&
            ele.tagName === 'INPUT' ||
            ele.tagName === 'TEXTAREA' ||
            ele.getAttribute('contenteditable').toString() === 'true';
}