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

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">document.getElementById('scripted').focus();

Nach dem Login kopieren

};

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">background-color: Aqua;

Nach dem Login kopieren

}

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!