专注于输入时，iOS中忽略固定/绝对定位 [英] Fixed/absolute positioneing 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?

有办法吗？

我已经尝试将标题设置为绝对，当输入集中。我在这里阅读， http://dansajin.com/2012/12/07/fix-position固定/ 。但是，它似乎并不为我工作。

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 a mess 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毫秒延迟防止标题在错误的位置弹出。

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屋！