Wie konzentriere ich mich mit der JavaScript-Funktion „focus()' auf ein „Element'?

Fähigkeit, sich auf eine

Verwenden der Funktion focus() von JavaScript

Ursprüngliche Frage:

Ist es möglich, sich auf ein

zu konzentrieren? Element durch Verwendung der Funktion focus() von JavaScript?

Zusätzliche Details:

Ich möchte die folgenden

Element mit focus():

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

Der Aufruf von document.getElementById('tries').focus(); schafft es nicht, diese Aufgabe zu erfüllen. Kann jemand Anleitung zur Lösung dieses Problems geben?

Antwort:

Durch Zuweisen eines Tabindex-Attributs können Sie den gewünschten Fokus auf ein

-Objekt erreichen. Tag.

Implementierung:

<code class="html"><div tabindex="0">Hello World</div></code>

Wenn Sie tabindex auf 0 setzen, wird das Tag in die inhärente Tab-Reihenfolge der Seite integriert, wobei 0 das erste Element in der Sequenz darstellt. Höhere Werte geben eine Rangfolge an, wobei 1 Vorrang vor 2 hat und so weiter.

Alternativ können Sie einen Tabindex von -1 zuweisen, um die Fokusfähigkeit auf Skripte zu beschränken und das Element für Benutzerinteraktionen unzugänglich zu machen.

Beispiel:

<code class="javascript">document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};</code>

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

<code class="html"><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">Set Focus To Element Z</div></code>

Durch die Einbeziehung dieser Techniken können Sie den Fokus Ihrer gewünschten

Elemente, die eine nahtlose Kontrolle über Benutzerinteraktionen und Zugänglichkeit ermöglichen.

Das obige ist der detaillierte Inhalt vonWie konzentriere ich mich mit der JavaScript-Funktion „focus()' auf ein „Element'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!