2009-02-15 10 views
9

Je travaille sur du JavaScript qui nécessite une balise qui peut être mise au point. J'aimerais pouvoir utiliser une balise <div />, mais les balises <div /> ne peuvent pas être mises en évidence.Focus sur un élément d'entrée/d'ancrage?

Il semble que les seuls éléments pouvant être mis au point sont <input /> et <a />. Existe-t-il un autre moyen de permettre à un élément d'obtenir le focus qui n'est pas un tag <input /> ou <a />?

Je ne peux pas utiliser <a /> ou <input /> balises parce que je dois être en mesure de placer le contenu à l'intérieur de la balise si aucune de ces balises ne fonctionnera, à moins qu'il ya un moyen de permettre <a /> imbriqués balises, bien que je doute depuis que goes against the standard. J'essaie de trouver un moyen de permettre à un tag <div /> (ou à tout autre élément du conteneur) d'obtenir le focus.

Répondre

9

Qu'entendez-vous par "peut obtenir le focus"? Tout élément DOM peut être configuré pour recevoir une multitude d'événements javascript, y compris les événements click. Ou voulez-vous dire "peut être étiqueté avec le clavier"? Si c'est le cas, et si vous ne pouvez pas utiliser une balise a comme conteneur, essayez le tabindex property sur vos éléments. Je ne suis pas sûr à quel point il est cross-browser, mais au moins, essayez-le avant d'écrire un ui à onglets dans javascript.

+0

Tout élément DOM peut recevoir la plupart des événements, mais pas l'événement "focus", qui semble être réservé à des éléments spécifiques qui peuvent varier en fonction du navigateur. La propriété "tabindex" semble faire l'affaire dans mon cas. –

+0

@DanHerbert - curieux: dans quels navigateurs travaillait-il? –

+0

Je sais que ce n'est pas une valeur standard, mais actuellement le travail pour que Assistive Technologies se concentre sur la balise anchor est de lui donner un tabIndex de -1. – clamchoda

0

Les signets sont la voie à suivre.

Begin votre contenu avec

<a href="#anchor"> 
0

Un peu d'une solution de contournement et non sémantiquement correct, mais ...

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

Ensuite, utilisez JavaScript pour intercepter l'événement onClick sur a#foo et return false.

Questions connexes