web-dev-qa-db-fra.com

Comment empêcher le clavier mobile de monter en bas de page sur les champs de texte?

J'ai des problèmes avec mon pied de page. Je veux que le pied de page reste en bas de l'écran, mais il y a un léger problème. Lors de l'utilisation du navigateur mobile, certains champs sont bloqués par le pied de page lors de l'ouverture du clavier. Le pied de page se lève sur le clavier et bloque le champ que vous tapez. Comment puis-je garder mon pied de page en bas et l'empêcher de remonter sur le clavier? Je veux qu'il reste caché sous le clavier.

J'utilise bootstrap, mais j'ai défini les éléments suivants dans mon propre CSS:

footer {
 width: 100%;
 position:absolute;
 left:0px;
 bottom:0px;
 height: 40px;
 margin: auto;
 overflow: hidden;
 background:#2E2E2E;
 text-align:center;
 line-height: 15px;
 color: #fff;

}

<html>
 <body>
  <div class="container">
  </div>
  <footer class="bs-footer" role="contentinfo">
 </body>
</html>

Comme vous pouvez le voir ici. Lorsque j'active le champ "Salasana", le pied de page se lève et bloque le champ de texte.

Avant d'ouvrir le clavier:

before

Après avoir ouvert le clavier:

after

androidhtmlcsstwitter-bootstrapmobile-browser
15
Firze

Résolu le problème avec l'aide d'Avinash. J'ai fini par changer ce qui suit dans mon CSS. Puisque j'ai tout le contenu à l'intérieur de la div conteneur, j'ai fait la hauteur du conteneur à 100% - pied de page. J'ai également supprimé le bas: 0px du pied de page.

footer{
 position: relative;
}
html,body {
    height: 100%; /* Needed for container's min-height  */  
}

.container{
    min-height:100%;
    margin-bottom: -40px; /* Put negative height of the footer here */
    padding-bottom: 40px; /* Put height of the footer here. Needed for higher than screen height pages */
}
7
Firze

J'ai trouvé la solution publiée ici sur StackOverflow pour être assez utile. Il comprend un extrait javascript qui a résolu le problème pour moi, en le collant ci-dessous;

if(/Android [4-6]/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
      if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
         window.setTimeout(function() {
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}
3
Adam Davis

Essayez d'utiliser la position: relative ou fixe

Si vous voulez que votre pied de page soit en bas, vous devez ajouter une hauteur minimale au corps

2
user2381689

Si vous ne souhaitez pas modifier le code html, vous pouvez essayer de résoudre ce problème avec JS.

Nous obtenons la position actuelle du haut, définissons la valeur de style supérieure et réinitialisons la valeur inférieure.

var fixed = document.querySelector(".fixed"),
    distanceFromTop = fixed.getBoundingClientRect().top;
fixed.style.top = distanceFromTop + 'px';
fixed.style.bottom = 'auto';
1
Sergei Panfilov