JS löst den relevanten Beispielcode für das Popup-Fenster des Mobiltelefon-Eingabefelds in der mobilen Webentwicklung

Der Unterschied zwischen der mobilen Webentwicklung und der PC-Seite besteht darin, dass die Eingabe auf dem Mobiltelefon über eine Softtastatur erfolgt, sodass ein Problem auftritt. Das heißt, wenn eine Eingabe erfolgt, wird die Tastatur angezeigt und das Ganze Die Seite wird sich zwangsläufig ändern. Wie kann dieses Problem gelöst werden? Im Folgenden wird der Herausgeber von Script House mit Ihnen JS teilen, um das Problem des Auftauchens des Mobiltelefon-Eingabefelds bei der mobilen Webentwicklung zu lösen

Der Unterschied zwischen der mobilen Webentwicklung und der PC-Seite besteht darin, dass die Eingabe auf der Da es sich bei Mobiltelefonen um eine Soft-Tastatur handelt, besteht das Problem darin, dass bei Eingaben die Tastatur automatisch angezeigt wird und sich zwangsläufig die gesamte Seite ändert

1 Wenn der Seitenhintergrund verbessert wird, ändert sich der Hintergrund nicht reicht aus.

Die Lösung liegt im Textkörper. Auch wenn die Seite erhöht ist, bleibt der Hintergrund bestehen

2. Verwenden Sie das feste Layout unten

Dieses Problem führt dazu, dass die Seite angehoben wird und der Fix am unteren Rand entsprechend angehoben wird und den entsprechenden Bereich abdeckt. Hierfür gibt es zwei Lösungen

Erstens sollte die Seite sein entsprechend verbessert. Um wie viel sich die Seite ändert, sollten wir die Seite oben scrollen lassen,

$this.offset().top ist das Höhe des Eingabeelements, scrollen Sie das Fenster an die Position der einzugebenden Eingabe

$('input').bind('click',function(e){
  var $this = $(this);
  e.preventDefault();
  setTimeout(function(){
    $(window).scrollTop($this.offset().top - 10);
  },200)
})

2. Blenden Sie das Fixelement aus und zeigen Sie es dann an, wenn die Seiteneingabe abgeschlossen ist

Verwenden Sie das Größenänderungsattribut, wenn das Eingabefeld des Mobiltelefons angezeigt wird. Der Seitenbildschirm wird verformt und die Größenänderung wird zuerst ausgeführt . Wenn es sich ändert, erhalten wir die aktuelle Seitenhöhe. Wenn die Seitenhöhe unterschiedlich ist, blenden wir das Element aus.

Das obige ist der detaillierte Inhalt vonJS löst den relevanten Beispielcode für das Popup-Fenster des Mobiltelefon-Eingabefelds in der mobilen Webentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!