SummArg | Cursos y recursos para webmasters

13/01/2012

¿Cómo resaltar un elemento contenedor de un campo de formulario on focus?

Cambiar el estilo de un input cuando se encuentra en estado focus es muy fácil si utilizamos el selector homónimo:

input:focus
 {
 background-color:yellow;
 }

El problema surge cuando queremos cambiar algo mas que el estilo del input (o sea, del campo en donde el usuario ingresará información), sino que deseamos que cambie el estilo del div que encierra a nuestro input. Por ejemplo, en la siguiente imagen mostramos como el campo Username está resaltado con un estilo diferente en su estado focus, y el campo First Name se muestra diferente, debido a que se encuentra en su estado original.

¿Cómo podemos lograrlo de forma compatible con todos los navegadores? Con un poco de jQuery. Primero descargamos el script y lo insertamos en nuestro proyecto.

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>

Luego elaboramos el HTML de nuestro formulario de forma que .field sea la clase contenedora del label y el input. Colocamos en el input el código a ejecutarse cuando se encuentre en estado focus.

<form>
 <div class="field">
 <label for="username"><p>Username</p>
 <input type="text" id="username" onfocus="setStyle(this.id)" value="JTiddley">
 </label>
 </div>
 <div class="field">
 <label for="firstname">First Name<br />
 <input type="text" id="firstname" onfocus="setStyle(this.id)" value="Joe">
 </label>
 <div>
 </form>

Y ahora utilizamos jQuery para indicar la modificación que sufre .field al clickear dentro de cada input y cómo debe retornar a su estado original. Simplemente añade y remueve la clase focus.

<script type="text/javascript">
$(document).ready( function() {
$('.field').focusin( function() {
 $(this).addClass('focus');
 }
 );
$('.field').focusout( function() {
 $(this).removeClass('focus');
 }
 );
}
);
</script>

Por último, diferenciamos los estilos.

.field {
width: 300px;
padding: 10xp 10px 0 10px;
}
.focus {
background: #dde5f1;
color:pink;
}

jQuery Highlight Plugin

Existe una alternativa en forma de plugin para jQuery y la pueden encontrar en este sitio. Se trata del plugin jQuery Highlight y es muy simple de aplicar a cualquier formulario, así como a tablas y listas. Un recurso sin dudas muy útil.

Entradas Relacionadas

  • Sin entradas similares

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Cambiar el estilo de un input cuando se encuentra en estado focus es muy fácil si utilizamos el selector homónimo: input:focus { background-color:yellow; }El problema surge cuando queremos cambiar algo mas que el estilo del i…..

Dejar un comentario