Einführung in das Fokuselement document.activeELEment in JavaScript

Vorwort:

Manchmal muss man herausfinden, auf welchem ​​Element der Seitenfokus liegt. Anhand des Fokus kann ermittelt werden, ob der Benutzer die Seite bedient, und andere Informationen. Früher war das nicht praktisch, weil Sie es selbst aufzeichnen mussten. html5了document.activeElement屬性um den aktuell aktiven Fokus abzurufen.

1. Der Fokus liegt standardmäßig auf dem Körper

Nachdem die Seite geladen wurde, befindet sich document.activeElement im Hauptteil:

Konsole.log(Dokument.aktivesElement);

// Konsolendruck:

//Körper

2. Den Fokus des Textfelds manuell erhalten

Der häufigste Weg, den Fokus zu erhalten, sind Formularelemente. Hier nehmen wir als Beispiel ein Textfeld:

<Eingabetyp="Text" ID="Name" />

Wenn Sie den Cursor in das Textfeld setzen, zeigen Sie das Objekt document.activeElement in der Konsole an.

Dokument.aktivesElement:

Es ist das Textfeld, das oben den Fokus erhält.

3. Fokussierung durch Fokussierung

Zusätzlich zur manuellen Platzierung im Textfeld, um dem Textfeld den Fokus zuzuweisen, können Sie auch focus() verwenden, um dem Textfeld den Fokus zuzuweisen.

<Eingabetyp="Text" ID="Name" />

<Skripttyp="text/javascript">

    // Den Winkel des Textfelds abrufen document.querySelector("#name").focus();

    Konsole.log(Dokument.aktivesElement);

    // Die Firefox-Browserkonsole druckt:

    // <Eingabe-ID="Name" Typ="Text">

</Skript>

4. Tab-Umschaltfokus

Sie können den Fokus über die Tabulatortaste auf der Webseite ändern. Versuchen wir es mit einer anderen Schaltfläche:

<Eingabetyp="Text" ID="Name" />

<button>Klick mich</button>

Um die Anzeige des Effekts zu erleichtern, stellen Sie einen Timer ein, um document.activeElement nach 5 Sekunden zu drucken:

setzeTimeout(() => {

    Konsole.log(Dokument.aktivesElement);

    // Die Firefox-Browserkonsole druckt:

    // <Schaltfläche>

}, 5000);

Besuchen Sie die Seite, wechseln Sie per Tab zur Schaltfläche und sehen Sie sich dann die Konsolenausgabe an:

Tab-Fokus wechseln:

5. document.hasFocus() bestimmt, ob der Fokus erhalten werden soll

Stellen Sie den Timer auf ähnliche Weise ein, um Folgendes anzuzeigen:

setzeTimeout(() => {

    console.log(dokument.hasFocus());

}, 5000);

• Wenn Sie beim Zugriff auf eine Seite zu einer anderen Seite wechseln und nach 5 Sekunden zur Überprüfung zurückkommen, wird eine false Meldung angezeigt. Zeigt an, dass der Benutzer die Seite nicht bedient.
• Bleiben Sie auf der Seite oder bedienen Sie die Seite, geben Sie „true“ zurück. Damit lässt sich feststellen, ob der Benutzer die Seite bedient.

Dies ist das Ende dieses Artikels über das Fokuselement document.activeELement in JavaScript . Weitere Informationen zum Fokuselement document.activeELement in JavaScript finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!