Position: corrigé dans iOS5 Se déplace lorsque l'entrée est concentrée

J'ai un div en haut de mon application mobile qui est en position fixe, donc il va rester sur le haut du navigateur (il défile au loin, dans l'ios 4 et inférieur qui est très bien). Quand une entrée est concentré et apporte le clavier, la div se déplace vers le milieu de la page. Voir les captures d'écran:

http://dbanksdesign.com/ftp/photo_2.PNG

Edit:
Ici est simplifié page de test:
http://dbanksdesign.com/test/

<body>
<div class="fixed"><input type="text" /></div>
<div class="content"></div>
</body>

.fixed { position:fixed; top:0; left:0; width:100%; background:#ccc; }
.content { width:100%; height:1000px; background:#efefef; }

source d'informationauteur dbanksdesign

8

Malheureusement, vous êtes probablement mieux de l'aide absolute de positionnement pour votre fixed éléments lorsque vous travaillez avec IOS. Oui, IOS5 ne prétendent soutenir fixed de positionnement, mais il tombe tout en bas quand vous avez des contrôles interactifs à l'intérieur que l'élément fixe.

J'ai eu le même problème avec la boîte de recherche sur mon switchitoff.net site. Dans IOS5 l'en-tête fixe serait de sauter en bas de la page si la zone de recherche gagné de se concentrer tout en de la page défile. J'ai essayé plusieurs solutions de contournement, et celui que j'ai actuellement est un <div> qui se trouve sur la zone de recherche. Lorsque cette <div> est cliqué, les événements suivants se produit:
1. La page défile vers le haut
2. La fixed en-tête est changé à absolute
3. La <div> couvrant la zone de recherche est caché
4. La recherche <input> est concentré
Les étapes ci-dessus sont inversés lorsque la boîte de recherche perd le focus. Cette solution évite l'en-tête en sautant en bas de la page lorsque la zone de recherche est cliqué, mais pour un simple site, vous êtes probablement mieux fait d'utiliser le positionnement absolu en premier lieu.

Il y a une autre question délicate avec IOS5 et de correction du positionnement. Si vous avez des éléments cliquables sur votre fixed zone avec body éléments défile derrière eux, cela peut casser vos événements tactiles.

Par exemple, sur switchitoff.net les boutons sur l'en-tête fixe est devenu unclickable lorsque les éléments interactifs ont défilé derrière eux. touchstart n'était même pas être déclenché lorsque ces boutons où exploité. Heureusement onClick semblait encore à travailler, mais c'est toujours un dernier recours pour IOS à cause du retard.

Enfin remarquez comment (IOS5), vous pouvez cliquer sur l'en-tête fixe et de faire défiler la page. Je sais que cela imite la façon dont vous pouvez utiliser la molette de défilement sur un en-tête fixe dans un navigateur, mais sûrement, ce paradigme n'a pas de sens pour un tactile, l'INTERFACE utilisateur?

Espérons qu'Apple continuera à améliorer le traitement des éléments fixes, mais dans l'intervalle, il est plus facile de coller avec absolute positionnement si vous avez quelque chose interactif dans votre zone fixe. Que ou revenir à la version IOS4 quand les choses étaient tellement plus facile!
5

À l'aide de la JohnW recomendation à utiliser absolute au lieu de fixed je suis venu avec cette solution de contournement:

Abord mis en place un bind pour détecter lorsque l'entrée est onFocus, faites défiler jusqu'en haut de la page et de modifier l'élément position à absolute:
```
$('#textinput').bind('focus',function(e) { 
  $('html,body').animate({
        scrollTop: 0
   });
  $('#textinput-container').css('position','absolute');
  $('#textinput-container').css('top','0px');
});
```
Remarque que je suis en utilisant l'id textinput pour l'entrée et la textinput-container pour la div barre du haut qui contient l'entrée.

Mettre en place une autre se lier à détecter lorsque l'entrée n'est pas au point pour modifier la position de la div retour à fixed
```
$('#textinput').bind('blur',function(e) { 
   $('#textinput-container').css('position','fixed');
  $('#textinput-container').css('top','0px');
});
```
J'ai été en utilisant une solution similaire pour une barre fixe au bas de la page, le code affiché doit être de travailler pour une barre fixe en haut mais je n'ai pas le tester

Version modifiée de pablobart de la solution, mais sans défilement haut:

//Absolute position
$('#your-field').bind('focus',function(e) { 
    setTimeout(function(){
        $('section#footer').css('position','absolute');
        $('section#footer').css('top',($(window).scrollTop() + window.innerHeight) - $('section#footer').height());
    }, 100);
});

//Back to fixed position
$('#your-field').bind('focusout',function(e) { 
    $('section#footer').removeAttr('style');
});

La simple CSS:
section#pied de page
*{ position:fixed; bottom:0; left:0; hauteur:42px }*

Cette solution fonctionne assez bien pour moi. Tout le code n'est d'attendre jusqu'à ce que l'utilisateur appuie sur un champ de texte, puis les changements de l'élément identifié par le " jQuerySelector paramètre à partir d'un 'fixe' à 'statique'. Lorsque le champ de texte perd le focus (l'utilisateur tape sur quelque chose d'autre) de l'élément de position est modifiée en "fixe".

//toggles the value of 'position' when the text field gains and looses focus
var togglePositionInResponseToInputFocus = function(jQuerySelector)
{
   //find the input element in question
   var element = jQuery(jQuerySelector); 

   //if we have the element
   if (element) {

      //get the current position value 
      var position = element.css('position'); 

      //toggle the values from fixed to static, and vice versa
      if (position == 'fixed') {
          element.css('position', 'static'); 
      } else if (position == 'static') {
          element.css('position', 'fixed'); 
      }
    }
};

Et les gestionnaires d'événement:

var that = this; 

//called when text field gains focus
jQuery(that.textfieldSelector).on
(
    'focusin', 
    function()
    {
        togglePositionInResponseToInputFocus(that.jQuerySelector); 
    }
);

//called when text field looses focus
jQuery(that.textfieldSelector).on
(
   'focusout',
    function()
    {
        togglePositionInResponseToInputFocus(that.jQuerySelector); 
    }
 );

0

La raison pour laquelle les boutons sont de plus en unclickable est parce qu'ils ont fait défiler invisible avec le contenu. Ils sont toujours là, pas à l'endroit où ils étaient, à l'origine, ni l'endroit où vous les voyez.

Si vous pouvez le deviner combien le bouton a été déplacé (en fonction de combien le contenu a été déplacé, vous pouvez cliquer sur le bouton invisible et il fonctionnera normalement. En d'autres termes, si le contenu est déjà par 50 pixels, cliquez sur 50 pixels à partir du bouton et il va fonctionner.

Vous pouvez faire défiler le contenu manuellement (même par un petit montant) et les boutons seront à nouveau fonctionner comme prévu.
0

Juste cacher votre élément fixe sur l'objet puis de le montrer à nouveau sur focusout. Je parie que vos utilisateurs n'ont pas besoin de le voir quand concentré. Je sais que ce n'est pas une solution, mais je pense que c'est une meilleure approche. Garder les choses simples.

Vous devez vous connecter pour publier un commentaire.