web-dev-qa-db-fra.com

iOS iPad Pause fixe lorsque le clavier est ouvert

La position fixe se casse sur l'en-tête lorsque je clique sur la zone de texte "Formulaire de recherche". Il se détache simplement du haut de la page (comme il est fixé là-haut) et commence à flotter au milieu de la page lorsque le clavier virtuel s'ouvre.

Ordinaire:

enter image description here

Cassé:

enter image description here

safarimobile-safari
64
coldblooded01

J'aime beaucoup cette solution ( http://dansajin.com/2012/12/07/fix-position-fixed/ ). Je l'ai emballé dans un petit plugin jQuery pour pouvoir:

  • Définir quel parent obtient la classe
  • Définissez les éléments auxquels cela s'applique (n'oubliez pas "textarea" et "select").
  • Définir le nom de la classe parent
  • Permettez-lui d'être enchaîné
  • Permettez-lui d'être utilisé plusieurs fois

Exemple de code:

$.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: Élément inutile supprimé

18
martinedwards

Dans notre cas, cela se corrigerait dès que l'utilisateur ferait défiler. C'est donc le correctif que nous avons utilisé pour simuler un parchemin:

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

Toutes les solutions que j'ai essayées jusqu'à présent ont échoué pour un scénario: la barre de navigation supérieure fixe disparaîtrait dès que le clavier est affiché sur un iPhone. Que faire si vous voulez que l'élément fixe reste fixe dans la même position même lorsque le clavier est affiché? Vous trouverez ci-dessous une solution simple qui permet cela, avec en prime le maintien de l'élément fixe collé en haut lorsque vous faites défiler la page lorsque le clavier est visible (c'est-à-dire, avec le focus toujours dans le champ de saisie).

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

Pour voir une démo, allez ici sur votre iPhone:

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

Voici une version utilisant requestAnimationFrame, mais elle ne semblait pas plus performante, alors je me suis contenté de la première version, car elle est plus simple:

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

3
thdoan

Voici une solution de hacky utilisant 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');
    });
});
3
Silkster

Basé sur ceci bonne analyse de ce problème, je l’ai utilisé dans les éléments html et body en css:

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

ça marche très bien pour moi.

2
prashanth padala

Ce que vous devez faire est de définir la position du corps sur fixe pendant que l'utilisateur modifie du texte, puis de le restaurer en statique une fois que l'utilisateur a terminé. Vous pouvez le faire sur la mise au point/flou (voir ci-dessous), ou si un utilisateur ouvre un modal, vous pouvez le faire sur une ouverture/fermeture modale.

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

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

Corrigé - Fait un bidouillage pour pousser l'en-tête à la position de réparation relative une fois que la zone de texte de recherche a été entrée. Il s'agit d'un bogue dans l'implémentation du clavier virtuel iOS car il casse les positions fixes dans les champs de texte SI la page peut défiler. Si le débordement est masqué/que la page ne peut pas défiler, elle ne casse pas les positions fixes lors de l’exécution du clavier virtuel.

À votre santé.

0
coldblooded01