AJDev.net: Tips & Trucos: Usar el TextChange del TextBox usando JQuery

Hola

La funcionalidad del TextChange en los textbox de asp.net es interesante pero el detalle esta es que debes hacer foco en otra parte para que este pueda ser disparado es decir pasar el foco a otro control, y la idea principal es que a medida que valla escribiendo en el textbox este modifique el valor de otro control.

Por tanto vamos a comenzar:

Paso 1.: En una pagina vacía agregaremos los siguientes controles:

TextBox: al cual llamaremos txtMostrarTexto

Label: al que llamaremos lblMensaje

Seria algo así:

<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtMostrarMensaje" runat="server"></asp:TextBox>
        <asp:Label ID="lblMensaje" runat="server" Text="Lanel"></asp:Label>
    </div>
    </form>
</body>
</html>

Como verán no es nada del otro mundo por ahora..

Paso 2.:

Agregaremos a nuestra HEAD de la pagina referencias hacia JQuery en caso de que no lo tengamos descargado pos no te preocupes puedes invocar la librería hacia los CDN de Microsoft o de Google ya te mostrare como, de igual forma nos hace falta hacer una referencia hacia un plugin que esta muy interesante que es jquery.textchange desarrollado por ZURB. Dicho plugin nos permitirá hacer los trucos que les mostrare Sonrisa

<head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="http://www.zurb.com/javascripts/plugins/jquery.textchange.min.js" type="text/javascript"></script>
</head>

Paso 3.: Ahora agregar la funcionalidad al TextBox

<script type="text/javascript">

        $(document).ready(function () {
            $('#txtMostrarMensaje').bind('textchange', function (event) {
                //Le indicamos al Label que su texto sera a partir 
                //de lo que se escriba en el TextBox
                $("#lblMensaje").text($('#txtMostrarMensaje').val());
                //Aqui obligo a que valla al servidor a ejecutar el evento asociado al TextBox
                //En caso de que TextChange del textbox ejecute alguna accion adicional
                //Y para que este funcione en el Load de la Pagina debes agregar la siguiente linea
                //ClientScript.GetPostBackEventReference(txtMostrarMensaje, "");
                //__doPostBack('txtMostrarMensaje', '');
            });
        });

    </script>

Ahora todo el código completo de nuestra pagina, por si te equivocas en algo Sonrisa

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="http://www.zurb.com/javascripts/plugins/jquery.textchange.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#txtMostrarMensaje').bind('textchange', function (event) {
                //Le indicamos al Label que su texto sera a partir 
                //de lo que se escriba en el TextBox
                $("#lblMensaje").text($('#txtMostrarMensaje').val());
                //Aqui obligo a que valla al servidor a ejecutar el evento asociado al TextBox
                //En caso de que TextChange del textbox ejecute alguna accion adicional
                //Y para que este funcione en el Load de la Pagina debes agregar la siguiente linea
                //ClientScript.GetPostBackEventReference(txtMostrarMensaje, "");
                //__doPostBack('txtMostrarMensaje', '');
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtMostrarMensaje" runat="server"></asp:TextBox>
        <asp:Label ID="lblMensaje" runat="server" Text="Lanel"></asp:Label>
    </div>
    </form>
</body>
</html>

Espero que les sea de utilidad lo presentado aquí. Haz Click para ver esta Demo

Tags: ASP.net Desarrollo Web Tips Trucos Web Web 2.0 JQuery

AJDev.net

Web dedicada a la Programación en .net

Tips & Trucos: Usar el TextChange del TextBox usando JQuery

Te ha gustado este Post?