Comment résoudre le problème selon lequel le clavier logiciel bloque la zone de saisie dans js-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-19 17:12:29

original

2674 Les gens l'ont consulté

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>

Copier après la connexion

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!