suchen

Heim >Web-Frontend >js-Tutorial >So lösen Sie das Problem der Blockierung des Eingabefelds durch die Softtastatur in js

So lösen Sie das Problem der Blockierung des Eingabefelds durch die Softtastatur in js

小云云
小云云Original
2017-12-20 09:56:023305Durchsuche

Dieser Artikel empfiehlt hauptsächlich eine js-Lösung für das Problem, dass die Soft-Tastatur das Eingabefeld blockiert. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Erfahrungsnotizen

Wenn die Softtastatur angezeigt wird:

iOS-Seite $('body').scrollTop() ändert sich

Android-Seite $ (window ).height() ändert sich

Das Hochziehen der Tastatur ist kein Augenblick, sondern ein verlangsamter Prozess

Das Problem tritt erneut auf

Auf der iOS-Seite ist die Bei der Eingabemethode tritt häufig das Problem auf, das Eingabefeld zu blockieren (insbesondere bei der Eingabemethode mit einem weißen Oberteil, z. B. der Baidu-Eingabemethode), wie im Bild gezeigt:

Problem Lösung

Wir müssen nur einen Timer starten, nachdem das Eingabefeld fokussiert ist, und $('body').scrollTop(1000000) ausführen. Auf diese Weise wird der gesamte Körper nach unten gescrollt, die Eingabe Das Feld wird natürlich sichtbar sein. Weitere Informationen finden Sie im folgenden Beispiel Ausblenden und Anzeigen der Soft-Tastatur und nicht automatisches Einblenden der Tastatur in Android

<!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;
    $('.bInput').on('focus', function() {
      clearInterval(timer);
      var index = 0;
      timer = setInterval(function() {
        if(index>5) {
          $('body').scrollTop(1000000);
          clearInterval(timer);
        }
        index++;
      }, 50)
    })
  });

</script> 
</html>
Die mobile Soft-Tastatur wirkt sich auf das Layout aus, wenn sie eingeblendet wird


JS implementiert benutzerdefinierte einfache Webseiten-Softtastatur-Effektcode_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem der Blockierung des Eingabefelds durch die Softtastatur in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS+WCF implementiert die FortschrittsbalkenfunktionNächster Artikel：JS+WCF implementiert die Fortschrittsbalkenfunktion

In Verbindung stehende Artikel

Mehr sehen