Enfoque de formulario html predeterminado sin JavaScript

159

¿Es posible establecer el foco de entrada predeterminado en un formulario HTML sin usar JavaScript, por ejemplo:

<html>
  <form>
    Input 1: <input type="text" name="textbox1"/>
    <br/>
    Input 2: <input type="text" name="textbox2"/>
  </form>
</html>

Quiero establecer el foco predeterminado en cualquiera de los cuadros de texto cuando se carga el formulario sin usar JavaScript (ya que quiero que el comportamiento ocurra cuando un usuario tiene js deshabilitado).

html accessibility Adam Jenkin
fuente

Respuestas:

292

Puede hacerlo en HTML5, pero de lo contrario, debe usar JavaScript.

HTML5 le permite agregar autofocusa su elemento de formulario, por ejemplo:

<input type="text" name="myInput" autofocus />

Esto funciona en navegadores que admiten HTML5 (o más bien, navegadores que admiten esta parte particular de HTML5) pero, como saben, no todos pueden usarlo todavía.

Jake Lucas
fuente
22

Algo a tener en cuenta ... si configura un elemento de formulario enfocado, cualquiera que use la Tecnología Asistida (AT) como un lector de pantalla deberá hacer una copia de seguridad para ver los menús y cualquier otro contenido que esté antes del campo enfocado.

Un método preferido, en mi opinión, es no establecer el foco en ningún campo, excepto un enlace de omisión si está disponible. Eso les da la opción de saltar al contenido de las páginas o leer la página de arriba hacia abajo.

Greg
fuente
¡Agregar un enlace de salto que también está oculto visualmente, pero accesible a través de lectores de pantalla, sería genial!
James Cazzetta
Tengo mucho que aprender sobre accesibilidad. ¡Gracias por agregar esta respuesta para ayudar al resto de nosotros a aprender!
Andrew Steitz
3

Como han dicho otros, sin Javascript no puede garantizar un campo predeterminado. Es posible que desee probar una opción alternativa, si tiene varios campos a los que un usuario quiera acceder es usaraccesskey atributo. Esto esencialmente significa que un usuario puede volver a cualquiera de los campos instantáneamente más tarde durante la navegación, lo que puede ser útil para los usuarios de lectores de pantalla, etc.

El artículo de Wikipedias sobre este tema es bastante útil: http://en.wikipedia.org/wiki/Access_key


fuente
0

Esto no es posible sin alguna forma de scripting. Incluso la página de inicio de Google requiere Javascript para enfocar el campo de búsqueda.

Evan Mulawski
fuente
1
Es. Google solo agrega JavaScript para aquellos navegadores que no admiten HTML5. Algo que vale la pena considerar en cualquier aplicación.
mvbrakel
-8

Sin embargo, es posible que pueda usar el atributo tabindex y usar el valor más bajo en el cuadro de texto predeterminado. Marque aquí para soporte de navegador:

http://reference.sitepoint.com/html/object/tabindex#compatibilitysection

El sitio sugiere que

(en casi todos los demás casos, es decir, controles de formulario y enlaces, el índice tabindex tiene un excelente soporte)

Cahit
fuente
3
El atributo "tabindex" no da enfoque automático a ningún elemento, ni siquiera a un elemento con "tabindex = 1". Al presionar <tab> (o un clic) es necesario enfocar el primer elemento en la secuencia de pestañas.
Clint Pachl