Was soll ich tun, wenn das Eingabefeld auf der mobilen Webseite durch die Eingabemethode blockiert wird?

Was soll ich tun, wenn das Eingabefeld auf der mobilen Webseite durch die Eingabemethode blockiert wird? Im Folgenden wird der Herausgeber einen Artikel mit Ihnen teilen, der das Problem der Blockierung des Eingabefelds durch die Eingabemethode auf mobilen Webseiten perfekt löst. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Zuvor musste ich ein Popup-Dialogfeld erstellen, um die Informationen einzugeben. Als ich es auf meinem Mobiltelefon ansah, stellte ich fest, dass beim Ausfüllen der Informationen im späteren Eingabefeld das Eingabefeld angezeigt wurde durch die Eingabemethode blockiert und konnte nur blind ausgefüllt werden.

Voraussetzung

1. Das Popup-Dialogfeld ist mit display:fixed

2 positioniert Das Dialogfeld ist repariert

Lösung

CSS-Teil

(dlg-top mit dlg-bottom ist die Klasse des Dialogfelds, mit der die Positionierungsmethode des Dialogfelds bestimmt wird)

.dlg-top{
 position: fixed;
 top:100px;
 left:10%;
}
.dlg-bottom{
 position: fixed;
 bottom:0px;
 left:10%;
}

js-Teil

„deliver- dlg“ ist die Klasse des Dialogfelds

//弹出对话框时，绑定的事件
//绑定输入框获取焦点事件
$(".deliver-dlg input,.deliver-dlg textarea").focus(function(){
 var input=$(this);
 //在输入框获取焦点后，窗口改变的话，执行事件
 $(window).resize(function(){
  //判断当前输入框是否在可视窗口之外（下面）
  if($(window).height()-(input.offset().top+input.offset().height-document.body.scrollTop)<0){
   //对话框定位方式改为bottom
   $(".deliver-dlg").removeClass("dlg-top").addClass("dlg-bottom");
  }
  else{
   $(".deliver-dlg").removeClass("dlg-bottom").addClass("dlg-top");
  }
 });
});
//取消对话框时，取消事件绑定
$(".deliver-dlg input").unbind();
$(".deliver-dlg").removeClass("dlg-bottom").addClass("dlg-top");
$(window).unbind();

Thinking Analysis

Um es auszudrücken Es geht einfach darum, die Positionierungsmethode des Dialogfelds zu ändern. In der Standardsituation verwenden Sie „oben“, wenn eine Eingabemethode vorhanden ist, und verwenden Sie „unten“ entsprechend der Situation. Wenn die Eingabe den Fokus erhält und das Fenster zurückgesetzt wird (d. h. das Eingabefeld wird angezeigt), achten Sie darauf, zuerst das Fokusereignis der Eingabe zu binden und dann das Fensteränderungsereignis zu binden, da dies auf dem Mobiltelefon der Fall ist Eingabe, die den Fokus erhält, und das Eingabefeld wird angezeigt, wodurch sich die Größe des Fensters ändert.

Bestimmen Sie nach dem Auftreten des Fenstergrößenänderungsereignisses, ob das Eingabefeld blockiert ist (d. h. nicht innerhalb des sichtbaren Bereichs des Fensters). Die verwendete Methode besteht darin, die Höhe des sichtbaren Fensters ($() zu verwenden. window).height() ) ist größer als der untere Rand des Eingabefelds (input.offset().top+input.offset().height-document.body.scrollTop), da input.offset().top die Position darstellt des Elements vom Kopf des Dokuments muss es die Position des Elements vom Kopf des visuellen Fensters berechnen und dann subtrahieren, wie viel die Bildlaufleiste gescrollt hat. Das Obige dient dazu, festzustellen, ob sich das Element am unteren Rand des visuellen Fensters befindet.

Verwandte Empfehlungen:

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

Eingabe erscheint, wenn Erstellen einer virtuellen Tastatur in H5 Was tun, wenn der Rahmen blockiert ist?

Lösung dafür, dass p immer durch select_Experience Exchange blockiert wird

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn das Eingabefeld auf der mobilen Webseite durch die Eingabemethode blockiert wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!