Lösen Sie das Problem, dass das Eingabefeld durch die Eingabemethode blockiert wird

Im Folgenden werde ich 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.

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, die zur Bestimmung der Positionierungsmethode des Dialogfelds verwendet wird)

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

js-Teil

"deliver-dlg" Analyse der Ideen für die Dialogbox-Klasse

//弹出对话框时，绑定的事件
//绑定输入框获取焦点事件
$(".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();

Um es einfach auszudrücken: Es ist so Ändern Sie die Positionierungsmethode des Dialogfelds. Wenn es eine Eingabemethode gibt, verwenden Sie je nach Situation die Position unten. 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.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So steuern Sie die Maus, um das Klicken auf die Schaltfläche in JS zu verweigern

So erhalten Sie den aktuellen Zeitunterschied mit JS

So implementieren Sie die Objektverwaltung von URLs in js

So verwenden Sie die Generator-Methode in JavaScript

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem, dass das Eingabefeld durch die Eingabemethode blockiert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!