Heim >Web-Frontend >js-Tutorial >Wie kann ich ein „Element' in JavaScript fokussierbar machen?

Wie kann ich ein „Element' in JavaScript fokussierbar machen?

Mary-Kate OlsenOriginal: 2024-11-05 11:04:02922Durchsuche

How Can I Make a `` Element Focusable in JavaScript?

Zugriff auf Fokus auf

Elemente über JavaScript

Trotz der inhärenten Fokussierbarkeit bestimmter Elemente (z. B. Eingaben und Schaltflächen) ist es nicht nativ möglich, sich auf ein

zu konzentrieren. Element mithilfe der JavaScript-Funktion focus().

Zuweisen eines TabIndex

Um den Fokus auf ein

zu aktivieren, muss man ihm ein Tabindex-Attribut zuweisen, das bestimmt seine Position innerhalb der Tab-Reihenfolge der Seite. Durch Zuweisen eines Tabindex von 0 kann das Element vom Benutzer oder über JavaScript fokussiert werden.

<code class="html"><div id="tries" tabindex="0">You have 3 tries left</div></code>

Fokus mit JavaScript festlegen

Nach dem Zuweisen des Tabindex wird das Element kann programmgesteuert mit der Funktion focus() fokussiert werden:

<code class="javascript">document.getElementById('tries').focus();</code>

Überlegungen

Ein Tabindex von -1 macht das Element nur über JavaScript fokussierbar, nicht Benutzerinteraktion.
Fokussierbare Elemente können beim Fokussieren Tastaturereignisse und Stile empfangen (z. B. Hintergrundfarbe ändern).
Vermeiden Sie die Zuweisung von Tabindex zu Elementen, die aus Gründen der Barrierefreiheit nicht vom Benutzer fokussierbar sein sollten.

Beispiel

Das folgende Beispiel zeigt die Fokuszuweisung und einen visuellen Hinweis:

<code class="html"><style>
div:focus {
    background-color: Aqua;
}
</style>

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>

<div id="test" onclick="document.getElementById('scripted').focus();">Set Focus To Element Z</div></code>

Das obige ist der detaillierte Inhalt vonWie kann ich ein „Element' in JavaScript fokussierbar machen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript for using Attribute function position background

Stellungnahme：

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

Vorheriger Artikel：Warum wird „0“ in einer if-Anweisung als „wahr“, in einem Vergleich jedoch als „falsch“ ausgewertet?Nächster Artikel：Warum wird „0“ in einer if-Anweisung als „wahr“, in einem Vergleich jedoch als „falsch“ ausgewertet?

In Verbindung stehende Artikel

Mehr sehen