Maison > Article > interface Web > Comment résoudre le problème selon lequel le clavier logiciel bloque la zone de saisie dans js

Comment résoudre le problème selon lequel le clavier logiciel bloque la zone de saisie dans js

亚连original: 2018-06-19 17:12:292662parcourir

Ci-dessous, je recommanderai une solution js au problème du clavier logiciel bloquant la zone de saisie. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Notes d'expérience

Lorsque le clavier contextuel apparaît :

ios End $('body').scrollTop() changera

android end $(window).height() changera

Tirer le clavier n'est pas un instant, mais là est un processus au ralenti

Reproduction du problème

Côté ios, il y a souvent un problème de méthode de saisie bloquant la saisie (en particulier celle avec une méthode de saisie supérieure blanche, telle que : méthode de saisie Baidu), comme indiqué dans la figure :

Problème résolu

Nous Il vous suffit de démarrer un minuteur une fois que la zone de saisie est focalisée et d'exécuter $('body').scrollTop(1000000 de cette façon, puisque tout le corps défile jusqu'à). en bas, la zone de saisie sera naturellement visible. Veuillez consulter l'exemple suivant pour plus de détails

Exemple de code source

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
  <title>demo</title> 
  <script src="../js/jquery-1.11.3.min.js"></script>
  <style> 
    * { 
      margin: 0;  
      padding: 0; 
    } 
    body, html { 
      width: 100%; 
      height: 100%;
    } 
    .bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      font-size: 0;
    }
    input {
      font-size: 14px;
      box-sizing: border-box;
      width: 50%;
      height: 50px;
      line-height: 50px;
    }
  </style> 
</head> 
<body>
  <p class="bottom">
    <input class="aInput" type="text" placeholder="ios聚焦后会被输入法遮挡" />
    <input class="bInput" type="text" placeholder="ios聚焦后不会被输入法遮挡" />
  </p>
</body> 
<script> 
  $(function() {
    // 解决输入法遮挡
    var timer = null;
    $(&#39;.bInput&#39;).on(&#39;focus&#39;, function() {
      clearInterval(timer);
      var index = 0;
      timer = setInterval(function() {
        if(index>5) {
          $(&#39;body&#39;).scrollTop(1000000);
          clearInterval(timer);
        }
        index++;
      }, 50)
    })
  });

</script> 
</html>

Ce qui précède est ce que j'ai compilé pour vous. . J'espère que cela vous sera utile à l'avenir.

Articles associés :

vue vuex vue-rouert permission router (tutoriel détaillé)

Comment implémenter orderBy tri et flou dans Angular Requête

Comment implémenter des invites de texte sensibles dans Angular

Comment implémenter l'affichage caché dans Angular

Comment faire glisser des images vers la gauche et la droite dans js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À propos de la méthode Vue.JS d'expansion et de contraction verticales des composants JS des modules à hauteur variableArticle suivant：À propos de la méthode Vue.JS d'expansion et de contraction verticales des composants JS des modules à hauteur variable

Articles Liés

Voir plus