iOS 7 - 修复了虚拟键盘上的页脚工具栏中断答案

【问题标题】：iOS 7 - Fixed footer toolbar breaks on virtual keyboardiOS 7 - 修复了虚拟键盘上的页脚工具栏中断
【发布时间】：2014-08-24 19:38:06
【问题描述】：

我创建了一个在浏览器中运行并提供聊天支持的应用程序。这适用于桌面和移动设备，并显示为固定页脚。

在桌面上，一切正常并且看起来很棒，但是当它进入移动设备时，我发现了一个奇怪的问题。

当我不在页面顶部并打开键盘时，一切正常：

但如果我在页面顶部附近，工具栏会中断并出现在页面的一半处：

我找到了其他人提到的以下链接，但我无法隐藏页脚，因为我需要显示它： http://forum.jquery.com/topic/how-to-set-footer-fixed-at-bottom-even-if-virtual-keyboard-is-open

请提供有关如何解决此问题的任何建议，我读到 iOS 添加了对固定位置的支持，但在这种情况下似乎被破坏了（从网页顶部打开虚拟键盘）。

这是我的代码：

#gc_toolbar_layout {
    ...
    position: fixed;
    word-break: keep-all;
    word-break: break-word;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

谢谢。

【问题讨论】：

您好，我遇到了较小的问题，您能告诉我您是如何解决的吗？我的问题stackoverflow.com/questions/29968891/…
我为此应用了一个令人难以置信的 hacky 修复，请查看我的评论

标签： javascript jquery ios mobile toolbar

【解决方案1】：

令人难以置信的 hacky 修复：

$(document).on('focus', 'textarea', function() {
    $("#gc_chat_layout").css({position: 'relative', float: 'right', bottom: 'auto'});
    $(document).scrollTop($(document).scrollTop());
});
$(document).on('blur', 'textarea', function() {
    $("#gc_chat_layout").css({position: 'fixed', float: 'none', bottom: '0'});
});

当我们不在页面顶部时，我们才看到上述问题。这基本上会将您立即带到页面顶部。

我们还添加了一些 javascript 代码来处理此问题，方法是将您的旧位置保存在一个变量中，并在完成后将您移回那里。

【讨论】：