Ist es möglich, sich mit der JavaScript-Funktion focus () auf ein <div> zu konzentrieren?

Ist es möglich, sich auf eine <div>JavaScript- focus()Funktion zu konzentrieren?

Ich habe einen <div>Tag

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

Ich versuche mich auf Folgendes zu konzentrieren <div>:

document.getElementById('tries').focus();

Aber es funktioniert nicht. Könnte jemand etwas vorschlagen ...?

window.location.hash = '#tries';

Dadurch wird zu dem betreffenden Element gescrollt und es im Wesentlichen "fokussiert".

Ja - das ist möglich. Dazu müssen Sie einen Tabindex zuweisen ...

<div tabindex="0">Hello World</div>

Ein Tabindex von 0 setzt das Tag "in der natürlichen Tabulatorreihenfolge der Seite". Eine höhere Zahl gibt ihm eine bestimmte Prioritätsreihenfolge, wobei 1 die erste, 2 die zweite usw. ist.

Sie können auch einen Tabindex von -1 angeben, wodurch das Div nur per Skript fokussierbar ist, nicht vom Benutzer.

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<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>

Offensichtlich ist es eine Schande, ein Element zu haben, das Sie per Skript fokussieren können und das Sie nicht mit anderen Eingabemethoden fokussieren können (insbesondere, wenn ein Benutzer nur über eine Tastatur verfügt oder ähnlich eingeschränkt ist). Es gibt auch eine ganze Reihe von Standardelementen, die standardmäßig fokussierbar sind und semantische Informationen enthalten, um Benutzer zu unterstützen. Nutze dieses Wissen mit Bedacht.

document.getElementById('tries').scrollIntoView()funktioniert. Dies funktioniert besser als window.location.hash bei fester Positionierung.

Sie können Tabindex verwenden

<div tabindex="-1"  id="tries"></div>

Der Tabindex-Wert kann ein interessantes Verhalten zulassen.

• Wenn der Wert "-1" angegeben wird, kann das Element nicht mit Registerkarten versehen werden, der Fokus kann jedoch programmgesteuert auf das Element gelegt werden (mithilfe von element.focus ()).
• Wenn der Wert 0 angegeben wird, kann das Element über die Tastatur fokussiert werden und fällt in den Tabulatorfluss des Dokuments. Werte größer als 0 erzeugen eine Prioritätsstufe, wobei 1 die wichtigste ist.

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

Ich wollte etwas wie das von Michael Shimmin vorschlagen, aber ohne Dinge wie das Element oder das darauf angewendete CSS fest zu codieren.

Ich verwende jQuery nur zum Hinzufügen / Entfernen von Klassen. Wenn Sie jquery nicht verwenden möchten, benötigen Sie nur einen Ersatz für add / removeClass

- Javascript

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

highlight(document.getElementById('tries'));

- CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}

Um den Rand blinken zu lassen, können Sie Folgendes tun:

function focusTries() {
    document.getElementById('tries').style.border = 'solid 1px #ff0000;'
    setTimeout ( clearBorder(), 1000 );
}

function clearBorder() {
    document.getElementById('tries').style.border = '';
}

Dadurch wird der Rand 1 Sekunde lang durchgehend rot und dann wieder entfernt.