AJDev.net: Tips & Trucos: Cambiando el Style al hacer Foco en un TextBox con JQuery

En muchas ocasiones queremos darle mas vida a nuestras aplicaciones web y mas en aquellos momentos que los usuarios no saben si quiera donde están parados Sonrisa , por tanto aquí le dejo este truquillo muy interesante y bastante útil.

Descripción del problema: Muchas veces el usuario no distingue en que campo se encuentra cuando esta agregando datos a un formulario y tiende a registrar datos indebidos, la idea es que al momento que se encuentre en un campo este cambie su color de fondo y borde para que el usuario sepa en que campo se encuentra.

1. Debemos agregar las referencias a JQuery a nuestra pagina, en este caso lo colocaremos en el HEAD del html.

<head runat="server">
    <title>Prueba Focus TextBox</title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> 
</head>

2. Agregamos una clase Style donde colocaremos el color de fondo y el borde al TextBox, esto puedes agregarlo a tu hoja de estilo o directamente en el HTML. Para efecto de esta demo lo colocare directamente en el HTML exactamente después de la invocación al JQuery.

<style type="text/css">
        .focus
        {
            border: 2px solid #D0E8F4;
            background-color: #ECF8FD;
        }
    </style>

3. Ahora nos toca agregar los TextBox a la pagina, vamos agregar 2 para poder notar el efecto.

<body>
    <form id="form1" runat="server">
    <div>
        Nombre: <asp:TextBox ID="txtNombre" runat="server" />
        <br />
        Apellido: <asp:TextBox ID="txtApellido" runat="server" />
    </div>
    </form>
</body>

Fíjense que no he colocado nada del otro mundo… hasta ahora vamos bien, si desean hacer pruebas desde ya notaran que no hace lo que queremos ver realmente.

4. Agregar el script que nos hará la magia, y esto se debe agregar debajo del Style que definimos anteriormente, es decir, aun dentro del tag HEAD.

<script type="text/javascript">
        $(document).ready(function () {
            $('input[type="text"]').focus(function () {
                //Es algo simple que es agregar la clase cuando este el foco
                $(this).addClass("focus");
            });

            $('input[type="text"]').blur(function () {
                //quitar la clase cuando el foco se pierde
                $(this).removeClass("focus");
            });
        });
    </script>

Ahora si… si lo pruebas te debería funcionar Sonrisa

Una muestra de esto en Linea son mis cajas de busquedad y los comentarios. :) o en este enlace

Todo el Código HTML:

<head runat="server">
    <title>Prueba Focus TextBox</title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
    <style type="text/css">
        .focus
        {
            border: 2px solid #D0E8F4;
            background-color: #ECF8FD;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input[type="text"]').focus(function () {
                //Es algo simple que es agregar la clase cuando este el foco
                $(this).addClass("focus");
            });

            $('input[type="text"]').blur(function () {
                //quitar la clase cuando el foco se pierde
                $(this).removeClass("focus");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Nombre:
        <asp:TextBox ID="txtNombre" runat="server" />
        <br />
        Apellido:
        <asp:TextBox ID="txtApellido" runat="server" />
    </div>
    </form>
</body>
</html>

Tags: ASP.net C# Desarrollo Web Desarrollo JQuery Tips Trucos Web

AJDev.net

Web dedicada a la Programación en .net

Tips & Trucos: Cambiando el Style al hacer Foco en un TextBox con JQuery

Te ha gustado este Post?