web-dev-qa-db-fra.com

Empêcher un élément <input> de faire défiler l'écran sur iPhone?

J'ai plusieurs <input type="number"> éléments sur ma page Web. J'utilise jQTouch et j'essaie de rester en plein écran en tout temps; c'est-à-dire que le défilement horizontal est mauvais. Chaque fois que je clique sur un <input> élément, la page défile vers la droite, montrant une bordure noire à droite de l'écran et décentre tout. Les entrées sont décalées par rapport à la gauche de l'écran et commencent quelque part vers le milieu de la page.

Comment puis-je empêcher ce défilement sur le focus?

javascriptiphoneweb-applicationssafarijqtouch
24
Stefan Kendall

Je viens de trouver la solution à ce problème dans cet article Arrêter le défilement de la page depuis le focus

Ajoutez simplement onFocus="window.scrollTo(0, 0);" à votre champ de saisie et vous avez terminé! (Je l'ai essayé avec <textarea> et <input type="text" /> sur l'iPad, mais je suis sûr que cela fonctionnera aussi sur l'iPhone.)

J'avais peur que le défilement soit visible comme un scintillement ou quelque chose, mais heureusement ce n'est pas le cas!

17
Mischa Magyar

voici comment j'ai résolu cela sur l'iPhone (Safari mobile) (j'ai utilisé jQuery)

1) créer une variable globale qui contient la position de défilement actuelle et qui est mise à jour à chaque fois que l'utilisateur fait défiler la fenêtre

var currentScrollPosition = 0;
$(document).scroll(function(){
    currentScrollPosition = $(this).scrollTop();
});

2) liez l'événement focus au champ de saisie en question. une fois concentré, faites défiler le document jusqu'à la position actuelle

$(".input_selector").focus(function(){
    $(document).scrollTop(currentScrollPosition);
});

Ta Da! Pas de "défilement sur le focus" ennuyeux

Une chose à garder à l'esprit ... assurez-vous que le champ de saisie est AU-DESSUS du clavier, sinon vous masquerez le champ. Cela peut être facilement atténué en ajoutant une clause if.

7
Maurice

Je recommanderais d'utiliser la méthode jQuery.animate () liée à ci-dessus , pas seulement le window.scrollTo (0,0), car iOS anime les propriétés de décalage de page lorsqu'un élément d'entrée est focalisé. Appeler window.scrollTo () une seule fois peut ne pas fonctionner avec le timing de cette animation native.

Pour plus d'informations, iOS anime les propriétés pageXOffset et pageYOffset de window. Vous pouvez effectuer une vérification conditionnelle sur ces propriétés pour répondre si la fenêtre a changé:

if(window.pageXOffset != 0 || window.pageYOffset != 0) {
  // handle window offset here
}

Donc, pour développer le lien susmentionné, ce serait un exemple plus complet:

$('input,select').bind('focus',function(e) { 
  $('html, body').animate({scrollTop:0,scrollLeft:0}, 'slow'); 
});
3
cacheflowe

Si le focus est défini par programme, voici ce que je ferais:

Enregistrez la valeur scollTop de la fenêtre avant de modifier le focus. Ensuite, restaurez scrollTop à la valeur enregistrée immédiatement après avoir défini le focus.

Si vous utilisez jQuery:

var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it
0
Himanshu P