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的iOS固定定位实施很差。我已经尝试了一些建议的解决方案，包括你所链接的解决方案，但没有一个能够令人满意地工作。禁用KeyboardShrinksView会导致输入字段隐藏在键盘下。

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

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

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

1 个答案: