在关注输入时，iOS中忽略了固定/绝对定位 [英] Fixed/absolute positioning neglected in iOS when focusing on input

问题描述

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

I'm building an app with Phonegap and I have a header which I have fixed to the top of viewport.

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

除非我点击输入字段并且键盘滑动，否则这样可以正常工作向上。然后完全放弃定位。标题在可见视图之外向上滑动。它再次关闭键盘后返回到它的位置。

This works as I want except when I tap a input field and the keyboard slides up. Then the positioning is totally discarded. The header is slided higher up outside the visable view. It returns to its place after closing the keyboard again.

我读过一些移动浏览器不关心定位固定和绝对定位可能是一个小屏幕不要被固定元素覆盖。这是真的吗？

I have read that some mobile browser don't care about positioned fixed and absolute to make sure that a possibly small screen don't get covered with a fixed element. Is this true?

有没有办法解决这个问题？

Is there a way around this?

我已经尝试在输入聚焦时将标题设置为绝对。我在这里读到了它， http://dansajin.com/2012/12 / 07 /修复位固定/ 。但是，它似乎对我不起作用。

I have tried setting the header to absolute when a input is focused. I read about it here, http://dansajin.com/2012/12/07/fix-position-fixed/. However, it doesn't seem to be working for me.

推荐答案

对于虚拟键盘，PhoneGap的iOS固定定位实现很差。我已经尝试了许多建议的解决方案，包括你所链接的解决方案，但它们都没有令人满意地工作。禁用KeyboardShrinksView会导致输入字段隐藏在键盘下。

PhoneGap’s implementation of fixed positioning for iOS is poor when it comes to the virtual keyboard. I’ve tried a number of proposed solutions, including the one you linked to, but none of them worked satisfactorily. Disabling KeyboardShrinksView can cause the input field to get hidden under the keyboard.

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

I ended up going with this workaround, which simply hides the fixed header when the keyboard slides into view and shows it again after the keyboard slides out of view. I await a more complete fix, but this solution has the benefit of being clean and reliable. The 10 ms delay on show() is enough to prevent the header from momentarily flashing in the wrong place while the keyboard is sliding back down. The 20 ms delay on hide() prevents the header from popping up in the wrong place if the user goes directly from one input field to the next.

$(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中忽略了固定/绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！