JavaScript | Fokus
Um das besser zu verstehen Fokus() Methode, schauen Sie sich die folgende Syntax an:
Element.Fokus (Optionen);
In dieser Syntax:
- Element: Es ist die Referenz eines HTML -Elements in JavaScript.
- Optionen: Es ist kein erforderlicher Parameter.
Beispiel 1: Konzentration auf ein Textfeld mit der Focus () -Methode
Erstellen Sie zunächst ein neues HTML -Dokument und erstellen Sie in diesem Dokument ein Eingabefeld und eine Schaltfläche mit den folgenden Zeilen:
In den obigen Zeilen:
- EingabetikTf1”
- Die Schaltfläche hat die ID als "btn1"Und ein Onclick -Attributsatz entspricht" buttonclicked () "
Ausführen dieses HTML -Dokuments zeigt Folgendes im Browser an:
Das Textfeld und die Schaltfläche werden beide auf der Webseite angezeigt. Um nun die Funktionalität beim Tastendrücken hinzuzufügen, fügen Sie die folgenden Zeilen in die JavaScript -Datei hinzu:
Funktion buttonclicked ()
TF = Dokument.GetElementById ("tf1");
tf.Fokus();
In den obigen JavaScript -Zeilen:
- Erstellen Sie zuerst eine Funktion namens als als buttonclicked ()
- Erhalten Sie in dieser Funktion die Referenz des Textfelds mit seiner ID und speichern Sie diese Referenz in der “tf”Variable
- Danach rufen Sie einfach die an Fokus() Methode mit der “tf”Variable mit Hilfe des Punktoperators
Zu diesem Zeitpunkt erzeugt die Webseite das folgende Ergebnis:
Es ist in der Ausgabe zu beobachten, dass das Drücken des Putts das Textfeld als aktiv oder “setztim Fokus”.
Beispiel 2: Konzentration auf ein Element mit „Optionen“ -Argumenten
In diesem Beispiel ist das Hauptziel, ein Element an einer scrollbaren Position zu haben. Danach sollte sich die Schaltfläche nicht nur auf dieses Element konzentrieren, sondern auch dieses Element aus dem Dokument in die Sichtweise bringen.
Erstellen Sie zunächst ein HTML -Dokument und erstellen Sie genau wie im ersten Beispiel ein Textfeld und eine Schaltfläche mit den folgenden Zeilen:
Typ = "Text"
id = "tf1"
class = "Scrolled"
Platzhalter = "Ich bin ein Textfeld"
/>
In diesen Zeilen ist der einzige Unterschied:
- Die Eingabe, die jetzt eine Klasse hat “scrolliert”, Mit der dieses Eingabetik
Fügen Sie danach die folgenden Zeilen zur CSS -Datei oder in der Füge hinzu Schild:
Körper
Höhe: 7000px;
.scrolliert
Position: absolut;
Oben: 4000px;
In den oben genannten Zeilen:
- Das Dokument war eine Höhe von 7000 PX, damit das Dokument scrollbar wird
- Danach setzen wir das Element mit dem scrolliert Klasse zu einer absoluten Position von 4000 PX von oben
Ausführen dieses HTML -Dokuments Geben Sie die folgende Webseite auf dem Browser an:
Aus der Ausgabe ist klar, dass das Textfeld jetzt an einer Position von platziert ist 4000px von oben.
Danach werden wir die folgenden JavaScript -Zeilen hinzufügen:
Funktion buttonclicked ()
TF = Dokument.GetElementById ("tf1");
tf.Focus (PREVENTSCROLL: False);
In diesen Zeilen:
- Eine Funktion buttonclicked () wird gemacht
- In dieser Funktion wird ein Verweis auf das Textfeld erstellt, indem die ID verwendet und in der Variablen gespeichert wirdtf”.
- Danach anwenden Sie die Fokus() Methode im Textfeld und in seinem Argument -Pass PREVENTSCROLL: False. Dadurch wird das Element in den Fokus und scrollen das Dokument, um dieses Element in Sicht.
Führen Sie das HTML -Dokument aus und Sie erhalten das folgende Ergebnis, wenn Sie auf die Schaltfläche klicken:
Aus der Ausgabe ist es zu beobachten, dass das Textfeld beim Klicken auf die Schaltfläche in die Ansicht des Browsers durch Scrollen des Dokuments in die Ansicht gebracht wird. Darüber hinaus konzentriert sich das Textfeld jetzt auf.
Abschluss
Dieser Artikel beleuchtet den Zweck und die Arbeit des Fokus() Methode in JavaScript. Diese Methode wird verwendet, um ein Element des HTML -Dokuments in den Fokus zu bringen oder in viel einfacheren Worten ihre aktive Eigenschaft als wahr festzulegen. Um diese Methode anzuwenden, verwenden Sie sie einfach mit der Referenz des HTML -Elements mit einem Punktoperator. Diese Fokusmethode kann auch ein optionales Argument aufnehmen, das oben gezeigt wurde.