Beim Webdesign auf Mobilgeräten ist die Verwendung von Eingabefeldern ein wesentlicher Bestandteil, und die Eingabemethode auf Mobiltelefonen mit Touchscreen wird hauptsächlich über Softtastaturen realisiert. In einigen spezifischen Szenarien ist die Soft-Tastatur jedoch offensichtlich nicht erforderlich. Beispielsweise besteht auf einer Seite, die nur Anzeigefunktionen bereitstellt, oder wenn der Inhalt des Eingabefelds vorab ausgefüllt wurde, keine Notwendigkeit, die Soft-Tastatur zu öffnen . Die Tastatur ist weg. Zu diesem Zeitpunkt müssen wir einige Techniken anwenden, um den Effekt zu erzielen, die Tastatur des Mobiltelefons auszublenden, und jQuery ist ein wichtiges Mitglied dieses Festes.
1. Herkömmliche Methoden zum Ausblenden der Tastatur
Um das Ein- und Ausblenden der Tastatur zu steuern, können wir einige vom Browser bereitgestellte APIs verwenden. Zu den gängigen Methoden gehören „blur()“ und „focus()“, die dazu führen können, dass das Eingabefeld den Fokus verliert und den Fokus erhält. Dementsprechend steuern sie das Ein- und Ausblenden der Tastatur.
Nehmen Sie die Methode „blur()“ als Beispiel. Wenn das Eingabefeld ausgelöst wird, können wir den folgenden Code ausführen, um die Tastatur auszublenden:
$('input, textarea').on('focus', function() {
document.activeElement.blur();
});Auf diese Weise kann der Effekt des Ausblendens der Tastatur erzielt werden. Diese Methode verhindert jedoch lediglich, dass das Eingabefeld den Fokus erhält. Wenn Sie dieses Eingabefeld weiterhin für Eingaben, Auswahl usw. verwenden möchten, müssen Sie zunächst erneut auf das Eingabefeld klicken.
2. jQuery-Methoden
jQuery bietet uns einige praktischere Methoden zum Steuern der Anzeige und Ausblendung der Tastatur. Am häufigsten werden die Methoden „blur()“, „focus()“ und „trigger()“ verwendet.
Ähnlich wie die vom Browser bereitgestellte Methode führt die Methode „blur()“ dazu, dass das aktuelle Eingabefeld den Fokus verliert. Diese Methode kann eine Rückruffunktion als Parameter akzeptieren. Wenn das Eingabefeld tatsächlich den Fokus verliert, wird diese Rückruffunktion ausgelöst.
$('input, textarea').blur(function() {
// 这里是回调函数
});Ähnlich kann die Methode focus() dafür sorgen, dass das aktuelle Eingabefeld den Fokus erhält.
$('input, textarea').focus(function() {
// 这里是回调函数
});Die Methode trigger() von jQuery kann bestimmte Ereignisse simulieren und auf diese Weise indirekt das Ein- und Ausblenden der Tastatur steuern.
$('button').click(function() {
$('input').trigger('blur');
});In diesem Beispiel wird beim Klicken auf die Schaltfläche das Unschärfeereignis des Eingabefelds ausgelöst. Daher verliert das Eingabefeld den Fokus und die Tastatur wird ausgeblendet.
3. Methoden zum Ausblenden der Tastatur
Schließlich können wir die oben genannten Methoden kombinieren, um die Funktion zum Ausblenden der Tastatur zu realisieren. Hier ist ein einfaches Beispiel:
// 绑定输入框的获取焦点事件
$('input').focus(function() {
// 输入框获取到焦点时，立即执行 blur 事件
$(this).blur();
});Dieser Code ist einfach, aber er verhindert, dass die Softtastatur aufspringt. Wenn auf das Eingabefeld geklickt wird, wird das Fokusereignis ausgelöst, und dann verlieren wir sofort den Fokus des Eingabefelds, wodurch die Tastatur ausgeblendet wird.
4. Zusammenfassung
Das Ausblenden der Softtastatur ist in bestimmten Situationen für die Gestaltung von Websites für mobile Geräte sehr wichtig. In diesem Artikel wird als Referenz für die Leser die Methode zum Steuern der Anzeige und Ausblendung der Softtastatur über jQuery vorgestellt. Natürlich gibt es auch andere Methoden, mit denen der Effekt des Ausblendens der Softtastatur erzielt werden kann. Der Leser kann je nach tatsächlicher Situation eine für ihn geeignete Methode auswählen, um dieses Ziel zu erreichen.
Das obige ist der detaillierte Inhalt vonjquery mobile Tastatur ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
