Bootstrap navbar-bottom-fixed 在平板电脑上使用屏幕键盘移动答案

【问题标题】：Bootstrap navbar-bottom-fixed moving with on screen keyboard on TabletBootstrap navbar-bottom-fixed 在平板电脑上使用屏幕键盘移动
【发布时间】：2014-03-04 13:16:30
【问题描述】：

我正在使用引导程序navbar-bottom-fixed 作为底部导航栏。每当我需要输入一些东西时，屏幕键盘就会显示出来，并且导航栏会随之“浮动”（显示在键盘上方）。

任何想法我可以如何克服这个？如果我可以只听键盘显示事件，我可以简单地更改 css postion 属性，我认为它会起作用。

感谢您的帮助。

【问题讨论】：

标签： html css twitter-bootstrap mobile

【解决方案1】：

您可以检查输入是否以 Jquery 为焦点，如果是，则隐藏底部栏。

像这样：

$('input').focus( function() {
    $('.navbar-bottom-fixed').hide();
});

$('input').blur( function() {
    $('.navbar-bottom-fixed').show();
});

【讨论】：

是的，想到了这个解决方案，但我希望有比将侦听器绑定到每个输入更直接的方法。如果没有其他答案作为答案，我会将其标记为正确的

【解决方案2】：

我是这样解决的：

<script type="text/javascript">
    $('head').append('<style>.navbar-fixed-bottom{visibility:hidden}@media (orientation:portrait) and (height:' + $(window).height() + 'px){.navbar-fixed-bottom{visibility:visible}}@media (orientation:portrait) and (height:' + $(window).width() + 'px){.navbar-fixed-bottom{visibility:visible}}@media (orientation:landscape) and (height:' + $(window).width() + 'px){.navbar-fixed-bottom{visibility:visible}}@media (orientation:landscape) and (height:' + $(window).height() + 'px){.navbar-fixed-bottom{visibility:visible}}</style>')
</script>

【讨论】：

谢谢，这对我有用，隐藏和显示技巧或在固定和绝对之间切换位置不是我想要的，因为当用户点击后退按钮时，输入字段的状态不会改变模糊或聚焦，我们需要在输入字段之外点击，但是你的 css 技巧解决了我的问题