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

Posted 2023-03-15

【中文标题】Bootstrap 3移动键盘解锁导航栏[重复]

【英文标题】：Bootstrap 3 mobile keyboard unlocks navbars [duplicate]

【发布时间】：2014-08-11 19:32:46

【问题描述】：

我的网站上有导航栏，使用 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>

最好的处理方法是什么？

【参考方案1】：

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

虚拟键盘

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

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

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

【讨论】：

第二个链接似乎不起作用

奇怪 - 它对我有用，如果它仍然不起作用，请告诉我。

可能是我的网络。这引导我朝着正确的方向前进，但我最终遵循了另一个帖子的答案，因为它完全符合我的需要。谢谢！

【参考方案2】：

我最终在这里遵循了答案：https://***.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);
);

【讨论】：

有道理，不错的方法