Heim >Web-Frontend >js-Tutorial >Wie kann ich die Funktion focus() von JavaScript verwenden, um ein DIV fokussierbar zu machen?

Wie kann ich die Funktion focus() von JavaScript verwenden, um ein DIV fokussierbar zu machen?

Susan SarandonOriginal: 2024-11-05 02:58:02891Durchsuche

How Can I Use JavaScript's focus() Function to Make a DIV Focusable?

Fokussierbare DIVs mit der Funktion focus() von JavaScript

Während die Funktion focus() üblicherweise auf Formularelementen wie Eingabefeldern oder Schaltflächen arbeitet, ist sie es Es ist auch möglich, sich auf ein

zu konzentrieren. Element. Um dies zu erreichen, ist es notwendig, dem Div ein Tabindex-Attribut zuzuweisen.

Tabindex zuweisen

<br><div id="tries" tabindex ="0">Sie haben noch 3 Versuche übrig</div><br>

Ein Tabindex von 0 platziert das Div in der natürlichen Tabulatorreihenfolge der Seite. Positive Werte geben eine bestimmte Priorität innerhalb der Tab-Reihenfolge an. Unterdessen macht ein Wert von -1 das Div nur über Skript fokussierbar, nicht über Benutzereingaben.

Beispielcode

<br>document.getElementById( 'test').onclick = function () {</p>
<pre class="brush:php;toolbar:false">document.getElementById('scripted').focus();

};

Dieses Skript demonstriert das Setzen des Fokus auf ein Div mit einem Tabindex von -1 durch ein vom Benutzer ausgelöstes Ereignis.

Styling fokussierter DIVs

Um den Fokus visuell anzuzeigen, kann CSS verwendet werden:

<br>div:focus {</p>
<pre class="brush:php;toolbar:false">background-color: Aqua;

}

Durch die Implementierung dieser Techniken können Sie sich erfolgreich auf

konzentrieren. Elemente mithilfe der Funktion focus() von JavaScript erstellen und so die Zugänglichkeit und Benutzererfahrung Ihrer Webanwendung verbessern.

Das obige ist der detaillierte Inhalt vonWie kann ich die Funktion focus() von JavaScript verwenden, um ein DIV fokussierbar zu machen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css using Attribute Event function this input

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：Tom- und Jerry-Karten mit illusionistischem Effekt mit HTML-CSS und JavascriptNächster Artikel：Tom- und Jerry-Karten mit illusionistischem Effekt mit HTML-CSS und Javascript

In Verbindung stehende Artikel

Mehr sehen