Posts Tagged ‘HTML 5’

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: , ,

mayo 24, 2010 0

Demos y ejemplos de HTML 5

By in General

En la web de HTML 5 Demos and Examples podemos vemos ver distitntos ejemplos de uso de HTML 5, así como los navegadores en que puede verse. Muy interesante para ir viendo lo que se puede hacer con esta nueva versión de HTML.

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

Tags: , ,

mayo 7, 2010 1

HTML5 Test ¿Cómo de bien soporta HTML5 tu navegador?

By in Herramientas

HTML5 Test es un test que nos permite saber que funcionalidades de HTML5 soporta nuestro navegador.

Los resultados para los navegadores que tengo instalados son:

Navegador Versión Resultado
Google Chrome 4.1 118
Opera 10.53 102
Mozilla Firefox 3.6.3 101
Safari 4.0.5 70
Internet Explorer 8 19

Por supuesto estos valores depenederán de las versiones instaladas de cada navegador.

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

Tags: ,