iOS iPad打开键盘时固定位置中断

当我点击“search表单”文本框字段时，在页眉上固定位置中断。 它只是从页面的顶部分离（因为它已经固定在那里），并在虚拟键盘打开时开始浮动页面的中间。

正常：

在这里输入图像说明

破碎：

在这里输入图像说明

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

  • 设置哪个父类获得该类
  • 设置适用于哪些元素（不要忘记“textarea”和“select”）。
  • 设置父类名称
  • 让它被链接
  • 允许多次使用它

代码示例： 

$.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 }); }

编辑：删除不必要的元素

在我们的情况下，只要用户滚动，就会自动修复。 所以这是我们用来模拟滚动的修复： 

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

下面是一个使用jQuery的解决scheme：

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'); }); });

到目前为止，我尝试过的所有解决scheme都失败了：固定的顶级导航栏会在iPhone上显示键盘时立即消失。 如果你想要固定的元素保持固定在相同的位置，即使显示键盘？ 下面是一个简单的解决scheme，它允许在键盘可见的情况下（即，焦点仍在input字段内）滚动页面时，将固定元素粘贴到顶部。 

 // 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的版本，但是它并没有更好的performance，所以我坚持使用第一个版本，因为它更简单：

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

固定 – 一旦search文本框被input，周围的黑客把头推回到相对固定位置。 这是iOS虚拟键盘实现中的一个错误，因为它打破了文本字段上的固定位置，如果页面是可滚动的。 如果隐藏溢出/页面不可滚动，则在执行虚拟键盘时不会破坏固定位置。

干杯。

你需要做的是在用户正在编辑文本的时候，将主体的位置设置为固定，然后在用户完成时将其恢复为静态。 您可以在焦点/模糊（如下所示）上执行此操作，或者如果用户正在打开模式，则可以在模式打开/closures时执行此操作。 

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