iOS的iPad的定位符键盘打开时(iOS iPad Fixed position breaks w

固定的位置上，当我点击“搜索表单”文本框中输入字段标题打破。它只是从页面顶部分离（因为它是固定在那里），当虚拟键盘打开启动页面的浮动中间。

正常：

破碎：

Answer 1:

我真的很喜欢这个解决方案（ http://dansajin.com/2012/12/07/fix-position-fixed/ ）。我打包起来成为一个小的jQuery插件，所以我可以：

一套父获取类
设置这适用于（不要忘了“文本区域”和“选择”）的元素。
设置父类的名字是什么
允许它被链接
允许它被多次使用

代码示例：

$.fn.mobileFix = function (options) {
    var $parent = $(this),

    $(document)
    .on('focus', options.inputElements, function(e) {
        $parent.addClass(options.addClass);
    })
    .on('blur', options.inputElements, function(e) {
        $parent.removeClass(options.addClass);

        // Fix for some scenarios where you need to start scrolling
        setTimeout(function() {
            $(document).scrollTop($(document).scrollTop())
        }, 1);
    });

    return this; // Allowing chaining
};

// Only on touch devices
if (Modernizr.touch) {
    $("body").mobileFix({ // Pass parent to apply to
        inputElements: "input,textarea,select", // Pass activation child elements
        addClass: "fixfixed" // Pass class name
    });
}

编辑：去除不需要的元素

Answer 2:

在我们的情况下，这将尽快解决自身的用户滚动。因此，这是我们一直在使用模拟滚动修订：

$(document).on('blur', 'input, textarea', function () {
    setTimeout(function () {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});

Answer 3:

下面是使用jQuery哈克解决方案：

HTML：

<label for="myField">My Field:</label> <input type="text" id="myField" />

<!-- ... other markup here .... -->

<div class="ad_wrapper">my fixed position container</div>

CSS：

.ad_wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,0.75);
    color: white;
    text-align: center;
}
.unfixed {
    position: relative;
    left: auto;
    bottom: auto;
}

JS：

$(function () {
    adWrapper = $('.ad_wrapper');

    $(document).on('focusin', 'input, textarea', function() {
        adWrapper.addClass('unfixed');
    })
    .on('focusout', 'input, textarea', function () {
        adWrapper.removeClass('unfixed');
    });
});

Answer 4:

所有这一切我已经试过这样的解决方案至今未能一个场景对我来说：固定顶部导航栏中，将尽快键盘显示在iPhone上消失。如果你想在固定元件保持固定在同一位置，即使显示的键盘是什么？下面是一个简单的解决方案，允许这一点，在保持粘在上面，你滚动页面的固定元素的奖金，而键盘是可见的（即，重点还是输入字段内）。

// Let's assume the fixed top navbar has id="navbar"
// Cache the fixed element
var $navbar = $('#navbar');

function fixFixedPosition() {
  $navbar.css({
    position: 'absolute',
    top: document.body.scrollTop + 'px'
  });
}
function resetFixedPosition() {
  $navbar.css({
    position: 'fixed',
    top: ''
  });
  $(document).off('scroll', updateScrollTop);
}
function updateScrollTop() {
  $navbar.css('top', document.body.scrollTop + 'px');
}

$('input, textarea, [contenteditable=true]').on({
  focus: function() {
    // NOTE: The delay is required.
    setTimeout(fixFixedPosition, 100);
    // Keep the fixed element absolutely positioned at the top
    // when the keyboard is visible
    $(document).scroll(updateScrollTop);
  },
  blur: resetFixedPosition
});

要查看演示，去这里在您的iPhone：

http://s.codepen.io/thdoan/debug/JWYQeN/gakeYJYOXDPk

下面是一个使用版本requestAnimationFrame ，但它似乎没有执行任何更好，所以我坚持了第一个版本，因为它更简单：

http://s.codepen.io/thdoan/debug/VpvJNX/yYMyLDLBwpRk

Answer 5:

你需要做的是设置在机身的位置固定，而用户正在编辑的文本，然后当用户完成其恢复到静态的东西。你可以做到这一点无论对焦点/模糊（如下图所示），或者如果用户打开一个模式，你可以做模态开/关。

$("#myInput").on("focus", function () {
    $("body").css("position", "fixed");
});

$("#myInput").on("blur", function () {
    $("body").css("position", "static");
});

Answer 6:

在此基础上很好地分析这个问题，我已经在CSS html和body元素使用这样的：

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

这对我工作的伟大。

Answer 7:

固定 - 难道一个黑客各地推头回相对固定位置，一旦搜索被输入文本框。这是iOS的虚拟键盘实现中的错误，因为它打破了对文本字段固定位置IF页面滚动。如果溢出是隐藏/页不滚动，那么它不会打破执行虚拟键盘时，固定位置。

干杯。

文章来源: iOS iPad Fixed position breaks when keyboard is opened