Heim Web-Frontend js-Tutorial Lösen Sie das Problem, dass das Eingabefeld durch die Eingabemethode blockiert wird

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

Jun 19, 2018 pm 05:10 PM
输入框 输入法

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%;
}
Nach dem Login kopieren

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();
Nach dem Login kopieren

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!

Erklärung dieser Website
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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So pinnen Sie die Eingabemethode an die Taskleiste in Windows 11 So pinnen Sie die Eingabemethode an die Taskleiste in Windows 11 Apr 14, 2024 pm 06:31 PM

So pinnen Sie die Eingabemethode an die Taskleiste in Windows 11

So lösen Sie das Problem, dass das Kandidatenwortfeld beim Eingeben der Eingabemethode im Windows 11-System nicht angezeigt wird So lösen Sie das Problem, dass das Kandidatenwortfeld beim Eingeben der Eingabemethode im Windows 11-System nicht angezeigt wird Apr 11, 2024 pm 05:20 PM

So lösen Sie das Problem, dass das Kandidatenwortfeld beim Eingeben der Eingabemethode im Windows 11-System nicht angezeigt wird

Wo kann man die Eingabemethode des Xiaomi-Mobiltelefons ändern? Die Schritte zum Einrichten der Eingabemethode des Xiaomi-Mobiltelefons Wo kann man die Eingabemethode des Xiaomi-Mobiltelefons ändern? Die Schritte zum Einrichten der Eingabemethode des Xiaomi-Mobiltelefons Mar 25, 2024 pm 01:36 PM

Wo kann man die Eingabemethode des Xiaomi-Mobiltelefons ändern? Die Schritte zum Einrichten der Eingabemethode des Xiaomi-Mobiltelefons

Versteckte Einstellungen für das schwebende Fenster der Win11-Eingabemethode Versteckte Einstellungen für das schwebende Fenster der Win11-Eingabemethode Dec 30, 2023 pm 11:24 PM

Versteckte Einstellungen für das schwebende Fenster der Win11-Eingabemethode

So lösen Sie das Problem der Verzögerung beim Wechsel der Eingabemethoden im Win10-System So lösen Sie das Problem der Verzögerung beim Wechsel der Eingabemethoden im Win10-System Dec 25, 2023 pm 05:10 PM

So lösen Sie das Problem der Verzögerung beim Wechsel der Eingabemethoden im Win10-System

So rufen Sie die fehlende Eingabemethode in Win10 auf So rufen Sie die fehlende Eingabemethode in Win10 auf Jul 04, 2023 pm 03:57 PM

So rufen Sie die fehlende Eingabemethode in Win10 auf

Was soll ich tun, wenn das Symbol für die Win10-Eingabemethode fehlt? Wie kann ich das Symbol für die Win10-Eingabemethode abrufen, nachdem es verloren gegangen ist? Was soll ich tun, wenn das Symbol für die Win10-Eingabemethode fehlt? Wie kann ich das Symbol für die Win10-Eingabemethode abrufen, nachdem es verloren gegangen ist? Feb 29, 2024 am 11:52 AM

Was soll ich tun, wenn das Symbol für die Win10-Eingabemethode fehlt? Wie kann ich das Symbol für die Win10-Eingabemethode abrufen, nachdem es verloren gegangen ist?

Wie kann das Problem gelöst werden, dass die Win11-Eingabemethode das Wortauswahlfeld nicht anzeigen kann? Wie kann das Problem gelöst werden, dass die Win11-Eingabemethode das Wortauswahlfeld nicht anzeigen kann? Jan 30, 2024 pm 05:42 PM

Wie kann das Problem gelöst werden, dass die Win11-Eingabemethode das Wortauswahlfeld nicht anzeigen kann?

See all articles