在关注输入时,iOS中忽略了固定/绝对定位

Question

我正在使用Phonegap构建一个应用程序,我有一个标题,我已将其固定到视口顶部.

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: red;
  z-index: 100;
}

这是我想要的,除非我点击输入字段并且键盘向上滑动.然后完全放弃定位.标题在可见视图之外向上滑动.它再次关闭键盘后返回原位.

我已经读过一些移动浏览器不关心定位固定和绝对定位,以确保可能的小屏幕没有被固定元素覆盖.这是真的？

有没有解决的办法？

我已经尝试在输入聚焦时将标题设置为绝对.我在这里读到了它,http://dansajin.com/2012/12/07/fix-position-fixed/.但是,它似乎对我不起作用.

Answer 1

当涉及到虚拟键盘时，PhoneGap\xe2\x80\x99s 在 iOS 上的固定定位实现很差。我\xe2\x80\x99已经尝试了许多建议的解决方案，包括您链接到的解决方案，但没有一个能够令人满意地工作。禁用 KeyboardShrinksView 可能会导致输入字段隐藏在键盘下方。

\n\n

我最终采用了这种解决方法，它只是在键盘滑入视图时隐藏固定标题，并在键盘滑出视图后再次显示它。我等待更完整的修复，但该解决方案的优点是干净可靠。show() 上的 10 毫秒延迟足以防止当键盘向下滑动时标题暂时在错误的位置闪烁。如果用户直接从一个输入字段转到下一个输入字段，hide() 上的 20 毫秒延迟可防止标题在错误的位置弹出。

\n\n

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

\n