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

226

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

javascript focus

— OM Die Ewigkeit
quelle

3

Was möchten Sie tun, wenn Sie sich darauf konzentrieren? Divs akzeptieren keine Eingaben. Möchten Sie also den Rand oder eine Hintergrundmarkierung usw. flashen?

— Michael Shimmins

@ Michael, ja, ich brauche das <div>, um die Aufmerksamkeit des Benutzers zu erregen ...

— OM The Eternity

1

Mögliches Duplikat Welche HTML-Elemente können fokussiert werden?

— Ciro Santilli 法轮功冠状病六四.

1

@MichaelShimmins und alle anderen <div> -Elemente können Eingaben akzeptieren, wenn Sie contenteditable auf true gesetzt haben. (Grund warum ich mich erkundigte)

— MattOlivos

1

@MichaelShimmins divkönnen Eingaben akzeptieren, wenn sie überlaufen und eine Bildlaufleiste anzeigen . Wenn ein divmit einer Bildlaufleiste fokussiert ist, scrollen die Pfeiltasten seinen Inhalt (anstelle des Inhalts anderer Elemente wie z. B. body).

— Rory O'Kane

100

window.location.hash = '#tries';

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

— Casey Chu
quelle

2

@Casey Chu: Es funktioniert gut in dh aber nicht in Firefox, hast du eine Idee?

— Haseeb Akhtar

Es funktioniert nicht in einigen Chrome-Versionen ... Allerdings tut @vinoths Lösung es

— Charliemops

1

Das funktioniert aber ... mit Angular hätten Sie Probleme !!

— Carlos Verdes

@CarlosVerdes; Gibt es eine Lösung für Angular?

— Mac Vicious

3

Wenn Sie nicht auf die Frage "Fokus" antworten, sollte dies nicht die richtige Antwort sein. In meinem Fall möchte ich mich auf ein 'contentEditable'-Div konzentrieren, und Ihr Trick hilft nicht weiter.

— Arnaudambro

453

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>

Erweitern Sie das Snippet

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.

— Fenton
quelle

6

@ Michael Shimmins, Dadurch kann das Element (auf nicht standardmäßige Weise!) Mit fokussiert werden focus().

— Strager

2

@Olical - Ich bin mir ziemlich sicher, dass genau das in der letzten Zeile der Mai-Antwort steht. Lassen Sie mich wissen, wenn Sie der Meinung sind, dass ein Problem bearbeitet werden muss.

— Fenton

2

Wenn es nicht klar war , und fügte hinzu , tabindexwird zu einem Element machen es Fokussierbare, die die ermöglicht focus()und blur()Methoden, und dann können Sie einen Fokus auslösen wie folgt aus :document.getElementById('tries').focus();

— striegeln

4

Hallo @SteveOwen - es scheint immer noch in Firefox v42 zu funktionieren. Ich habe dieser Antwort einen Ausschnitt hinzugefügt, damit Sie ihn ausführen und testen können.

— Fenton

9

@SteveOwen using window.location.hash = ...ist der Weg, dies zu tun. Fokus bedeutet nicht "in Sicht bringen", sondern nur, den Fokus buchstäblich auf dieses Element zu legen.

— Fenton

76

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

— Vinoths
quelle

2

Beachten Sie, dass diese Lösung in IE, Opera oder Safari nicht funktioniert.

— AlecRust

1

Ich habe es gerade in Chrome 65 versucht und es funktioniert nicht. Das Overlay-Div rollt in die Ansicht, aber der Fokus liegt immer noch im Hintergrund-Div. Der einzige sichere Weg, den ich kenne, besteht darin, ein tabellierbares Element (mit tabindexAttribut) im Overlay-Div zu haben und es focus()stattdessen für dieses Element zu verwenden.

— Donnerstag,

@ om-the-eternity hat bereits angegeben, dass er möchte, dass das Div die Aufmerksamkeit des Benutzers auf sich zieht. Er muss also nicht das Div fokussieren (auch wenn es nicht richtig ist, es zu tun), sondern es auf den Bildschirm bringen , das löst das

— Omar Vazquez

Wenn ich dies in Chrome mache, wird immer wieder zum noch fokussierten Eingabefeld gescrollt. Vor allem, wenn die Seite noch nicht geladen ist.

— Roger Krueger

37

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.

— Sarath Ak
quelle

1

Wow, danke cooler Trick. Danke dir! Ich hätte das sonst nicht herausgefunden.

— AVProgrammer

Lebensretter, danke. In Edge kann ein Div ohne diesen Trick fokussiert werden, in Chrome jedoch nicht. Akzeptierte Antwort ist großartig, aber ich möchte keinen zusätzlichen Teil in der URL.

— Cal

rette das Leben. Arbeitet gut mit Chrom und Firefox

— Susampath

14

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

— Azad
quelle

Dies funktioniert für mich in Chrom / Chrome 46 nur kombiniert mit$('#inner').focus();

— TNT

2

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

— Juan Mendes
quelle

1

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>

Erweitern Sie das Snippet

— San Jing
quelle

0

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.

— Michael Shimmins
quelle