Cambiar el color del Background en controles Asp.Net cuando se obtiene o pierde el foco:

Este es mi primer post acerca de Asp.Net, así que quiero empezar con un ejemplo que usa 3 tecnologías web importantes: JQuery, CSS y Asp.Net.

Mi trabajo se ha orientado mas a desarrollar aplicaciones en Windows Form, manipulaciones y creación de controles para darles efectos personalizados, por eso quise hacer algo similar en web.

El controles windows form es sencillo crear una caja de texto que cambie su color de fondo cuando obtenga el foco y regrese a su color original cuando pierde el foco, sol hay que crear una clase que herede de TextBox, sobreescribir el evento OnFocus y programar el código que cambia de color de fondo.

Entonces quise hacer algo similar en Asp.Net, para lo cual tuve que usar CSS y JQuery.

Primero creamos un proyecto de Asp.Net, quitamos las paginas aspx que traep or defecto y agregamos una nueva pagina que es donde realizaremos nuestro ejemplo.

 quitamos las paginas aspx que trae por defecto y los estilos

agregamos una nueva página aspx

creamos una tabla html con 3 filas donde agregaremos 3 controles textbox de Asp.Net

El siguiente código establecemos las 3 cajas de texto con la propieades cssclass="ControlOffFocus":

    
 

        


            
 
                nombre
            

            
            
 
            
        

            
 
                apellido paterno
            

            
            
 
            
        

            
 
                apellido materno
            

            
            
 
            
        

Al ejecutar podemos visualizar nuestro diseño con las 3 cajas de texto pero sin ningun efecto de cambio de color cuando se establece el foco.

ahora creamos una hoja css llamada Controls.css con el siguiente código:

.ControlOnFocus
{
    background: #C3CDFF;
    color: Black; 
    border: 1px outset #05293F;
}

.ControlOffFocus
{
    background: #FEEDA8;
    color: Black; 
    border: 1px outset #FFA100;
}

y por último referenciamos el archivo jQuery q trae por defecto el proyecto de visual studio o descargas la ultima versión y lo añadimos a la carpeta scripts del proyecto y escribimos el codigo de jquery que va a permitir que se cambie de color cuando se obtiene el foco en los textbox:

ejecutamos y vemos que se cambia el color de fondo cuando se obtiene el foco y vuelve a su color original al perderlo.