Heim > Artikel > Web-Frontend > So lösen Sie das Problem, dass die Softtastatur das Eingabefeld in js blockiert

So lösen Sie das Problem, dass die Softtastatur das Eingabefeld in js blockiert

亚连Original: 2018-06-19 17:12:292653Durchsuche

Im Folgenden werde ich eine js-Lösung für das Problem der Blockierung des Eingabefelds durch die Soft-Tastatur empfehlen. Sie hat einen guten Referenzwert und hoffe, dass sie für alle hilfreich ist.

Erlebnisnotizen

Wenn die Softtastatur angezeigt wird:

ios End $('body').scrollTop() wird sich ändern

android end $(window).height() wird sich ändern

Das Hochziehen der Tastatur ist kein Moment, aber da ist ein Zeitlupenprozess

Reproduktion des Problems

Auf der iOS-Seite besteht häufig das Problem, dass die Eingabemethode die Eingabe blockiert Feld (insbesondere das mit einer weißen oberen Eingabemethode, z. B. Baidu-Eingabemethode), wie in der Abbildung gezeigt:

Problem gelöst

Uns Sie müssen nur einen Timer starten, nachdem das Eingabefeld fokussiert ist, und $('body').scrollTop(1000000) ausführen, da der gesamte Körper gescrollt wird Unten ist natürlich das Eingabefeld sichtbar.

Beispielquellcode

<!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>

Das Obige habe ich für Sie zusammengestellt Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

vue vuex vue-rouert Berechtigungsrouting (ausführliches Tutorial)

So implementieren Sie orderBy Sortierung und Unschärfe in Angular Abfrage

So implementieren Sie sensible Textaufforderungen in Angular

So implementieren Sie die versteckte Anzeige in Angular

So verschieben Sie Bilder in js nach links und rechts

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die Softtastatur das Eingabefeld in js blockiert. 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：Über die Methode von Vue.JS zum vertikalen Erweitern und Zusammenziehen von JS-Komponenten von Modulen mit variabler HöheNächster Artikel：Über die Methode von Vue.JS zum vertikalen Erweitern und Zusammenziehen von JS-Komponenten von Modulen mit variabler Höhe

In Verbindung stehende Artikel

Mehr sehen