Bootstrap 3移动键盘解锁导航栏[重复]

Question

我的网站上有导航栏，使用 bootstrap 3（页眉和页脚）。

导航栏完美适用于所有导航，直到打开 iOS 键盘。当键盘被调出时，它un-fixes 导航栏的位置并使它们出现static（您可以滚动它们，它们看起来就像它们覆盖在页面上一样）。

示例页脚代码：

<div class="footer navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid"></div>
    <div class="navbar-header"><div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2" style="height: 1px;">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <div class="btn-group dropup" style="width:100%;">
          <!--somestuff-->
          </div>
        </li>
      </ul>
    </div>
</div>

最好的处理方法是什么？

Answer 1

这里略作介绍：http://getbootstrap.com/getting-started/#support-fixed-position-keyboards

虚拟键盘

另外，请注意，如果您在模式或导航栏中使用输入，iOS 有一个渲染错误，不会更新固定元素的位置 当虚拟键盘被触发时。一些解决方法 包括将您的元素转换为位置：绝对或调用 定时器对焦以尝试手动校正定位。这不是 由 Bootstrap 处理，因此由您决定使用哪种解决方案 最适合您的应用。

这是“将元素转换为位置：绝对”方法的示例：

http://dansajin.com/2012/12/07/fix-position-fixed/

Answer 2

我最终在这里遵循了答案：https://stackoverflow.com/a/23860205/1612605

只是隐藏了我的 siteContent，这解决了问题。因为在编辑文本时没有可滚动的内容。我也可以包含它以删除我的标题，但现在这不会导致问题，所以我将它留在里面。

$(document).on('focus','input, textarea, select',function() {
    setTimeout(function() {
        $('#siteContent').hide();
    },20);
});
$(document).on('blur','input, textarea, select',function() {
    setTimeout(function() {
        $('#siteContent').show();
    },10);
});