web-dev-qa-db-fra.com

zone de texte d'entrée cachée derrière le clavier sur Android Chrome

J'ai une page Web mobile du format suivant:

en-tête - logo etc - position absolue

contenu - défilement, position absolue

pied de page, position absolue 40px

La zone de contenu comporte plusieurs zones de saisie. Sur Chrome sur Android, en appuyant sur une zone de saisie en bas de la page, l'entrée n'est pas visible lorsque le clavier virtuel apparaît. La page défile pour essayer de déplacer la zone vers le haut, mais pas assez pour être réellement visible. Il finit par se cacher derrière le pied de page.

Une idée de comment résoudre ce problème? Cela se produit uniquement sur Chrome-Android. Safari sur iOS et IE sur Windows Phone et autres navigateurs mobiles fonctionnent très bien.

androidhtmlgoogle-chromemobile
24
Aniket

J'espérais des solutions CSS uniquement, mais je ne pense pas qu'il y en ait une. La réponse de Gaunt Face est un bon moyen de le faire. Malheureusement dans mon cas, cela nécessiterait quelques modifications et a la possibilité de briser l'automatisation entre autres (puisque l'url a des #targets ajoutés).

J'ai résolu ce problème en modifiant le type de position dans les gestionnaires de 2 clics.

J'ai un gestionnaire de clics pour n'importe quel champ d'entrée/zone de texte. Dans ce gestionnaire de clic, je modifie le style de position de la div du conteneur de formulaire pour qu'il soit statique. Notez que cela poussera le pied de page vers le bas si le champ conteneur a une barre de défilement. Dans mon cas, ce n'est pas un problème car lorsque le clavier apparaît, seuls quelques champs sont visibles. L'utilisateur ne voit visiblement aucune différence.

J'ai un deuxième gestionnaire lorsque l'utilisateur clique sur un champ de saisie - gestionnaire de clic sur la page - où je restaure le type de position en absolu, faisant apparaître la page comme elle l'était auparavant.

Cela a une conséquence inattendue: la position de défilement est perdue. J'ai corrigé cela en obtenant le décalage du champ de saisie et en appelant scrollTop sur la div parent avec ce décalage, rétablissant ainsi la position.

J'ai vu quelques questions à ce sujet, mais je n'ai pas trouvé de réponse. J'espère que ça aidera quelqu'un.

8
Aniket

Il existe plusieurs façons de résoudre ce problème, la solution la plus évidente consiste à utiliser javascript pour définir un hachage sur l'URL.

Vous pouvez voir un exemple de cela ici: http://jsbin.com/emumeb/24/quiet Code: http://jsbin.com/emumeb/24/edit =

Pour un exemple un peu plus complexe, si vous avez un en-tête et un pied de page fixes, vous souhaiterez peut-être utiliser des cibles pour modifier l'apparence de la page lorsqu'un hachage est défini.

En fonction de votre mise en page, vous devrez peut-être devenir un peu plus créatif, vous pouvez définir une classe sur le corps pour un état focalisé vs non focalisé et modifier l'interface utilisateur en conséquence, mais il devient difficile de maintenir une bonne expérience sur mobile, ordinateur de bureau, etc.

Voici un exemple http://jsbin.com/emumeb/30/quiet Code: http://jsbin.com/emumeb/30/edit

Évidemment, c'est quelque chose chrome devrait se gérer lui-même (similaire à UX iOS a), j'ai donc soulevé un bogue contre Chrome - https://code.google.com/p/chromium/issues/detail?id=270018&can=4&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified .

8
Matt Gaunt

Je ne suis pas intelligent comme vous,

J'ai donc pris une règle et mesuré la taille de l'écran de mon téléphone portable. 2e Puis a mesuré la taille du clavier

J'ai remarqué que le clavier occupait 38% de l'écran.

J'ai donc mis un div dans le pied de page et l'ai appelé affectueusement grenouille.

et j'ai utilisé ce code:

 $('body').on('focus', 'input, textarea', function(event) {
        var altura = $(window).height();
        var scrollp = parseInt(parseInt(altura)/100*38);
        $("#divSapo").css("height",scrollp + "px");
        window.scrollTo(0,document.body.scrollHeight);
    });
5
Danilo Ribeiro

Le passage de absol positionnement à fixe positionnement devrait résoudre le problème. Absolute positionne l'élément par rapport à la taille de page initiale lors du chargement de la page (l'ajout d'un clavier réduit la page visible). Fixed positionne l'élément par rapport à la taille de page actuelle, en maintenant l'élément au-dessus du clavier.

#myElement {
  position: fixed;
  bottom: 2em;
}
4
bornSwift

J'ai trouvé une solution CSS qui fonctionne très bien.

Vous pouvez effectuer une requête css pour un écran de fenêtre d'une hauteur de 300 pixels ou moins, c'est-à-dire la hauteur de l'écran des téléphones avec le clavier logiciel affiché. Cela fonctionne très rapidement et très bien. Par exemple

@media screen and (max-height: 300px) {

    #myinputtext{
        position: absolute; 
        top: 50px;

    }
}
2
Alberto Perez

Si vous utilisez jQuery, vous pouvez utiliser les codes comme suit:

$('body').on('focusin', 'input, textarea', function(event) {
  if(navigator.userAgent.indexOf('Android') > -1 && ...){
   var scroll = $(this).offset();
   window.scrollTo(0, scroll);
 }
});

Cependant, le bug devrait être résolu maintenant.

0
chuhai

J'ai utilisé scrollIntoView pour résoudre ce problème.

$(document).on('focus', selector, function() {
    document.querySelector(selector).scrollIntoView();
});
0
Pawan Kotak