Etiquetado de la entrada: focus


11
Abr 10

Formularios estilo inline en HTML y javascript

En muchos formularios nos puede venid bien que tengan un formato inline al estilo del login de facebook, es decir, que el contenido del campo nos indique qué hay que introducir y cuando vayamos a ese campo eliminemos el contenido para que el usuario lo rellene. Con esto nos ahorraríamos poner “label” para cada campo.

<input type="text" name="mi_variable"
     onfocus="if( this.value == 'etiqueta' ) { this.value = ''; }"
     onblur="if( this.value == '' ) { this.value = 'etiqueta'; }"
     value="etiqueta" />

Siendo ‘etiqueta’ el nombre del contenido. En el caso de las contraseñas se podría hacer igual pero solamente veríamos asteriscos, así que habría que cambiar el type también. Como añadido podríamos cambiar el color según es onfocus u onblur a través de this.style.color.
Aquí va otro ejemplo:

<input type="text" name="Password"
     onfocus="
       if( this.value == 'Password' ) {
          this.value = ''; // Borramos el contenido para dejarlo limpio para el usuario
          this.style.color = '#000000'; // Lo ponemos en negro
          this.type = 'password'; // Lo convertimos en password para que muestre asteriscos
       }"
     onblur="
       if( this.value == '' ) {
          this.value = 'Password'; // Volvemos a ponerle el texto en caso de no haber añadido una password
          this.style.color = '#CCCCCC'; // Lo ponemos en gris
          this.type = 'text'; // Lo pasamos a texto si no ha introducido password
       }"
     value="Password" />