2009-02-15 13 views
9

Ich arbeite an etwas JavaScript, das ein Tag benötigt, das den Fokus bekommen kann. Ich möchte in der Lage sein, ein <div /> Tag zu verwenden, aber <div /> Tags können nicht den Fokus bekommen.Konzentrieren Sie sich auf ein Nicht-Eingabe-/Ankerelement?

Es sieht so aus, als ob die einzigen Elemente, die den Fokus erhalten können, <input /> Tags und <a /> Tags sind. Gibt es eine andere Möglichkeit, ein Element zu aktivieren, das kein <input /> oder <a /> Tag ist?

Ich kann nicht <a /> oder <input />-Tags verwenden, weil ich in der Lage sein müssen, Inhalte innerhalb des Tags zu platzieren, so weder dieser Tags funktionieren wird, es sei denn, es ist ein Weg, verschachtelte <a /> Tags zu ermöglichen, obwohl ich es bezweifle, dass seit goes against the standard. Ich versuche herauszufinden, wie ein <div />-Tag (oder ein anderes Containerelement) den Fokus erhalten kann.

Antwort

9

Was meinen Sie mit "kann Fokus bekommen"? Jedes DOM-Element kann so eingerichtet werden, dass es eine Vielzahl von JavaScript-Ereignissen empfängt, einschließlich click Ereignisse.

Oder meinen Sie "kann Tabbed mit der Tastatur"? Wenn ja, und wenn Sie kein a Tag als Ihren Container verwenden können, versuchen Sie die tabindex property auf Ihre Elemente. Ich bin mir nicht sicher, wie Cross-Browser es ist, aber versuchen Sie es zumindest, bevor Sie ein Registered UI in Javascript selbst schreiben.

+0

Jedes DOM-Element kann die meisten Ereignisse empfangen, aber nicht das Ereignis "focus", das für bestimmte Elemente reserviert ist, die je nach Browser variieren können. Die "tabindex" -Eigenschaft scheint in meinem Fall den Trick zu machen. –

+0

@DanHerbert - neugierig: In welchen Browsern hat es funktioniert? –

+0

Ich weiß, es ist kein Standard-Wert, aber derzeit die Arbeit für Assistive Technologies, um den Fokus auf das Anker-Tag zu bekommen, ist es, einen tabIndex von -1 zu geben. – clamchoda

0

Lesezeichen sind der Weg zu gehen.

Beginnen Sie den Inhalt mit

<a href="#anchor"> 
0

Etwas von einer Vermeidung des Problems und nicht semantisch korrekt, aber ...

a#foo { display: block; } 
a#foo:hover { cursor: default; } 

Dann JavaScript verwenden, um die OnClick-Ereignis auf a#foo und return false abzufangen.

Verwandte Themen