IOS iPad Fixed position when keyboard is open

Question

Fixed splitting the position on the header when I click on the "Search Form" text box. It just breaks away from the top of the page (as it is fixed there) and begins to float in the middle of the page when you open the virtual keyboard.

Normal:

Brocken:

Answer 1

I really like this solution ( http://dansajin.com/2012/12/07/fix-position-fixed/ ). I packed it in a small jQuery plugin so that I can:

• Set parent class
• Specify which elements this refers to (do not forget "textarea" and "select").
• Specify the name of the parent class
• Let him be shackled
• Allows you to use it several times

Code example:

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

EDIT: Removed unwanted item

Answer 2

In our case, this will be fixed as soon as the user scrolls. So this is the fix we used to model the scroll:

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

Answer 3

Here is a hacky solution using 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

All the solutions that I have tried so far have not led to one scenario for me: the fixed top navigator will disappear as soon as the keyboard is displayed on the iPhone. What if you want the fixed element to remain fixed in the same position even when the keyboard is displayed? Below is a simple solution that allows this with a bonus to hold a fixed element at the top when scrolling through the page when the keyboard is visible (i.e., the Focus is still inside the input field).

 // Let 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 }); 

To see the demo, go here on your iPhone:

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

Here's a version that uses requestAnimationFrame , but has not shown itself better, so I stuck to the first version, as it is simpler:

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

Answer 5

Bugfix - Hacked to return the title back to the relative commit position after entering the search text field. This is a bug in the implementation of the iOS virtual keyboard, because it breaks fixed positions into text fields. IF page scrolls. If the overflow is hidden / the page does not scroll, then with the virtual keyboard it will not interrupt fixed positions.

Greetings.

Answer 6

What you need to do is set the body position to fixed while the user edits the text and then restores it to static when the user is executed. You can do this either by focus / blur (shown below), or if the user opens a modal mode, you can do it on a modal open / close.

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