En este articulo veremos como por medio de CSS y JavaScript podemos darle algo mas de interactividad a nuestros formularios cambiando el color del borde sobre el campo (input) que tiene el foco, ósea sobre el campo que se escribe.
Como ven al situar el foco sobre un campo este cambia su color de borde haciendo mas visible el campo sobre el cual vamos a escribir, el escenario ideal para aplicar este efecto son aquellos formularios grandes donde el usuario debe ingresar gran cantidad de datos y puede que entre tantos inputs pierda la vista de donde esta escribiendo, al resaltar el borde con este efecto estamos ayudando a que eso no suceda.
Empecemos armando el formulario...
<form name="form1" method="post" action="">
Nombre <input type="text" name="nombre" onFocus="foco(this);" onBlur="no_foco(this);" style="border:1px solid #CCCCCC">
<br>
Apellido <input type="text" name="apellido" onFocus="foco(this);" onBlur="no_foco(this);" style="border:1px solid #CCCCCC"><br><br>
<input type="submit" name="Submit" value="Enviar">
</form>
Como vemos es un formulario normal, solo hay que destacar unos parámetros adicionales en las etiquetas inputs...
<input type="text" name="nombre" onFocus="foco(this);" onBlur="no_foco(this);" style="border:1px solid #CCCCCC">
Los primeros dos parámetros adicionales son onFocus y OnBlur estos parámetros son eventos que se producirán cuando el input tenga el foco (onFocus) y cuando lo pierda (onBlur) al producirse esos efectos se llama a la función JavaScript asociada...
onFocus="foco(this);"
En el caso de onFocus llamamos a la función "foco" y le pasamos como parámetro el input, esto lo hacemos utilizando la palabra clave "this". En el caso de onBlur llamamos a la función"no_foco" y también le pasamos "this" como parámetro.
Ahora tenemos que crear la funciones JavaScript que nombramos anteriormente y que son las encargadas de generar el efecto que queremos lograr, para ello pongamos el siguiente código entre las etiquetas <head> </head> de nuestro documento...
<script>
function foco(elemento) {
elemento.style.border = "1px solid #000000";
}
function no_foco(elemento) {
elemento.style.border = "1px solid #CCCCCC";
}
</script>
En este código podemos ver las funciones antes nombradas ("foco" y "no_foco") que lo que hacen es cambiarle el estilo del borde al elemento input pasado como parámetro (this)...
elemento.style.border = "1px solid #000000";
Solo cabe aclarar que podemos modificar los colores a nuestro antojo.
Eso es todo amigos.
Autor: Mauro Rondinelli
http://www.elguruprogramador.com.ar/zonas/ver.asp?cod=113
Usuarios que han visto este tema también han visto...
- Hacks en CSS útiles para Internet Explorer
- Opacity en CSS
- Texto parpadeante en CSS
- Creando esquinas redondeadas usando CSS
- Usando CSS en tablas
- Versión imprimible de este documento
- Enviar por e-mail este documento
