Posts Tagged ‘autofocus’

mayo 23, 2011 1

Autofocus en campos de formulario

By in HTML 5, JavaScript

Las webs pueden usar JavaScript para situar el foco en un campo concreto de un formulario, normalmente el primero, como por ejemplo hace Google. Para facilitar esto, HTML 5 introduce una nueva propiedad en los campos de formulario, la propiedad autofocus, que nos permite hacer que un campo de formulario tenga el foco por defecto.

Veamos como se usa esta propiedad:

<!DOCTYPE html>
<html>
<head>
 <title>Autofocus</title>
</head>
<body>
 <form>
 <input type="text" name="buscar" id="buscar" autofocus/> <input type="submit" value="buscar"/>
 </form>
</body>
</html>

Sencilla de usar, pero ¿qué pasa si el navegador no soporta esta propiedad? Podemos hacer uso de JavaScript para ello:

<!DOCTYPE html>
<html>
<head>
 <title>Autofocus</title>
</head>
<body>
 <form>
 <input type="text" name="buscar" id="buscar" autofocus/> <input type="submit" value="buscar"/>
 <script>
 if( ! ("autofocus" in document.createElement( "input" ) ) )
 {
 document.getElementById( "buscar" ).focus();
 }
 </script>
 </form>
</body>
</html>

Comprobamos si el elemento input soporta la propiedad “autofocus” y si no la soporta se asignamos el foco al elemento mediante JavaScript.

Si usamos jQuery como framework JavaScript podemos hacer:

<!DOCTYPE html>
<html>
<head>
 <title>Autofocus</title>
 <script src="jquery.min.js"></script>
 <script>
 $(document).ready(function() {
 if( ! ("autofocus" in document.createElement( "input" ) ) )
 {
 $( "#buscar" ).focus();
 }
 });
 </script>
</head>
<body>
 <form>
 <input type="text" name="buscar" id="buscar" autofocus/> <input type="submit" value="buscar"/>
 </form>
</body>
</html>

Como podemos es muy fácil implementar esta funcionalidad, tanto si el navegador soporta esta propiedad como si no. Como suele ser habitual esta funcionalidad no es una panacea que haya que implementar en todos los proyectos, dependerá de las características del mismo y tendremos que saber cuando es conveniente y cuando no utilizarla.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,