2009-02-15 14 views
9

Estoy trabajando en algunos JavaScript que requieren una etiqueta que pueda enfocarse. Me gustaría poder usar una etiqueta <div />, sin embargo, las etiquetas <div /> no pueden enfocar.¿Se enfoca en un elemento de no entrada/anclaje?

Parece que los únicos elementos que pueden enfocarse son <input /> etiquetas y <a /> etiquetas. ¿Hay alguna otra manera de permitir que un elemento obtenga el foco que no es una etiqueta <input /> o <a />?

no puedo usar <a /> o <input /> etiquetas porque tengo que ser capaz de colocar contenido dentro de la etiqueta por lo que ninguna de esas etiquetas funcionará, a menos que haya una manera de permitir anidados <a /> etiquetas, aunque lo dudo, ya que goes against the standard. Estoy tratando de encontrar una forma de permitir que una etiqueta <div /> (o cualquier otro elemento contenedor) se enfoque.

Respuesta

9

¿Qué quiere decir con "se puede enfocar"? Cualquier elemento DOM puede configurarse para recibir una multitud de eventos javascript, incluidos los eventos click.

¿O quiere decir "se puede tabular con el teclado"? Si es así, y si no puede usar una etiqueta a como su contenedor, intente con tabindex property en sus elementos. No estoy seguro de cómo es el navegador cruzado, pero al menos pruébalo antes de escribir una interfaz de usuario con pestañas en javascript.

+0

Cualquier elemento DOM puede recibir la mayoría de los eventos, pero no el evento de "enfoque", que parece estar reservado para elementos específicos que pueden variar según el navegador. Sin embargo, la propiedad "tabindex" parece hacer el truco en mi caso. –

+0

@DanHerbert - curioso: ¿en qué navegadores funcionó? –

+0

Sé que no es un valor estándar, pero actualmente las alternativas para que Assistive Technologies se centre en la etiqueta de anclaje es darle un tabIndex de -1. – clamchoda

0

Los marcadores son el camino a seguir.

comenzar su contenido con

<a href="#anchor"> 
0

algo de una solución y no semánticamente correcto, pero ...

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

A continuación, utilice JavaScript para interceptar el evento de clic en a#foo y volver falsa.

Cuestiones relacionadas