iOS 5固定定位和虚拟键盘

Question

我有一个移动网站,它通过位置固定在屏幕底部的div.一切都在iOS 5中正常工作(我在iPod Touch上测试),直到我在一个带有表单的页面上.当我点击输入字段并出现虚拟键盘时,我的div的固定位置突然丢失.只要键盘可见,div就会随页面滚动.单击完成以关闭键盘后,div将恢复到屏幕底部的位置并遵循位置:固定规则.

有没有其他人经历过这种行为？这是预期的吗？谢谢.

Answer 1

我的申请中遇到了这个问题.这是我如何解决它:

input.on('focus', function(){
    header.css({position:'absolute'});
});
input.on('blur', function(){
    header.css({position:'fixed'});
});

我只是滚动到顶部并将其定位在那里,因此iOS用户不会注意到任何奇怪的事情.在一些用户代理检测中包含此内容,以便其他用户不会出现此行为.

Answer 2

我的ipad问题略有不同,虚拟键盘将我的视口推到屏幕外.然后在用户关闭虚拟键盘后,我的视口仍在屏幕外.在我的情况下,我做了类似以下的事情:

var el = document.getElementById('someInputElement');
function blurInput() {
    window.scrollTo(0, 0);
}
el.addEventListener('blur', blurInput, false);

Answer 3

这是我们用来解决ipad问题的代码.它基本上检测偏移和滚动位置之间的差异 - 这意味着'固定'不能正常工作.

$(window).bind('scroll', function () {
    var $nav = $(".navbar")
    var scrollTop = $(window).scrollTop();
    var offsetTop = $nav.offset().top;

    if (Math.abs(scrollTop - offsetTop) > 1) {
        $nav.css('position', 'absolute');
        setTimeout(function(){
            $nav.css('position', 'fixed');
        }, 1);
    }
});

Answer 4

当键盘启动时,位置固定元件不会更新它们的位置.我发现通过欺骗Safari认为页面已经调整大小,元素将重新定位自己.它并不完美,但至少你不必担心转换到"位置:绝对"并自己跟踪变化.

以下代码只是监听用户何时可能正在使用键盘(由于输入被聚焦),并且直到它听到模糊,它只是侦听任何滚动事件然后执行调整大小的技巧.到目前为止,似乎对我来说工作得很好.

    var needsScrollUpdate = false;
    $(document).scroll(function(){
        if(needsScrollUpdate) {
            setTimeout(function() {
                $("body").css("height", "+=1").css("height", "-=1");
            }, 0);
        }
    });
    $("input, textarea").live("focus", function(e) {
        needsScrollUpdate = true;
    });

    $("input, textarea").live("blur", function(e) {
        needsScrollUpdate = false;
    });

Answer 5

以防有人在研究这个问题的时候发生了这个问题.我发现这个帖子有助于激发我对这个问题的思考.

这是我最近一个项目的解决方案.您只需将"targetElem"的值更改为表示标题的jQuery选择器.

if(navigator.userAgent.match(/iPad/i) != null){

var iOSKeyboardFix = {
      targetElem: $('#fooSelector'),
      init: (function(){
        $("input, textarea").on("focus", function() {
          iOSKeyboardFix.bind();
        });
      })(),

      bind: function(){
            $(document).on('scroll', iOSKeyboardFix.react);  
                 iOSKeyboardFix.react();      
      },

      react: function(){

              var offsetX  = iOSKeyboardFix.targetElem.offset().top;
              var scrollX = $(window).scrollTop();
              var changeX = offsetX - scrollX; 

              iOSKeyboardFix.targetElem.css({'position': 'fixed', 'top' : '-'+changeX+'px'});

              $('input, textarea').on('blur', iOSKeyboardFix.undo);

              $(document).on('touchstart', iOSKeyboardFix.undo);
      },

      undo: function(){

          iOSKeyboardFix.targetElem.removeAttr('style');
          document.activeElement.blur();
          $(document).off('scroll',iOSKeyboardFix.react);
          $(document).off('touchstart', iOSKeyboardFix.undo);
          $('input, textarea').off('blur', iOSKeyboardFix.undo);
      }
};

};

修复程序有一点延迟,因为iOS在滚动时停止了DOM操作,但它确实有效......