Contador y Limitador de Caracteres

La idea de colocar esta función a un TextArea o a un TextBox tipo multiline de ASP.NET resulta muy común cuando existe un limite de espacio en un campo de una tabla en la Base de Datos (BD), ya que en ocasiones se crean campos para párrafos, mensajes o títulos con un tamaño de caracteres 400 por ejemplo y para no desbordar este tope o para evitar que los datos se almacenen incompletos en la BD se establece un limitador de caracteres en el campo y preferiblemente en la parte del cliente. En la siguiente figura se muestra un ejemplo

Esto se puede logran con el siguiente código JavaScript:


    <script type="text/javascript" language="javascript">
         function  contadorTexto(campo, cuentaCampos, limiteMaximo)
        {
             if  (campo.value.length > limiteMaximo) //Si muy largo, cortar.
                campo.value = campo.value.substring(0, limiteMaximo);
             else
                 cuentaCampos.value = (limiteMaximo - campo.value.length);
        }
     </script>

Los dos (2) siguientes elementos son el TextBox donde se escribe el texto que se cuenta y se limita, seguido de un Input que muestra la cantidad de caracteres que faltan para llegar al limite.



<asp:TextBox ID="Txt_Mensaje" runat="server" TextMode="MultiLine" Height="80px" Width="400px" onkeydown="contadorTexto(this.form.Txt_Mensaje, this.form.Txt_Cont, 500);" onkeyup="contadorTexto(this.form.Txt_Mensaje, this.form.Txt_Cont, 500);"></asp:TextBox>

<input id="Txt_Cont" type="text" size="3" disabled="disabled">

Controlar Teclas en TextBox, input y textarea (KeyPress)

A continuación se encuentra el código que permite controlar las teclas que se pulsan (KeyPress) en una caja de texto de ASP.NET (TextBox), input tipo text y textarea de HTML desde Javascript. Este evento se llama cada vez que presiona una tecla cualquiera en la caja de texto. Ideal para cuando se quiere controlar la tecla Enter para enviar un formulario y ademas funciona en todos los explordores. En el ejemplo de abajo se muestra un mensaje de alerta cuando se presiona la tecla Enter.



////////////////// CODIGO JAVASCRIPT /////////////////////



function get_KeyPress(textbox, evento)
{
    //debugger;
    var keyCode;
    if (evento.which || evento.charCode) {
        keyCode = evento.which ? evento.which : evento.charCode;
        //return (keyCode != 13);
    }
    else if (window.event)
    {
        keyCode = event.keyCode;
        if (keyCode == 13)
        {
            if (event.keyCode)
                event.keyCode = 9;
        }
    }

    if (keyCode == 13)
    {
        alert("se presiono Enter");
        return false;
    }
    return true;
}



////////////////// CODIGO DE TEXTBOX /////////////////////




<asp:TextBox ID="TxtMsj" runat="server" Width="270px" placeholder="Manejo evento KeyPress y Enter" onkeypress="return get_KeyPress(this, event);"></asp:TextBox>

Ubicar cursor al final de input, textarea HTML

A continuación se encuentra el código que permite posicionar el cursor al final de un TextBox (en ASP.NET), input y textarea (HTML) desde Javascript. Este evento se genera cuando el input o caja de texto recibe el foco, Ideal para cuando hay frecuente actualización de la pagina, como en el caso de un Chat.

////////////////// CODIGO JAVASCRIPT /////////////////////

function ponerAlfinal(campo)

{

    var explor = navigator.appName;         //Identificar el explorador

    //alert("Explorador: " + explor);

    if (explor == "Microsoft Internet Explorer")   //Codigo para MS Internet Explorer

    {

        var range = campo.createTextRange();

        range.collapse(false);

        range.select();

    }

    else if (explor == "Netscape")      //Codigo para Netscape: Chrome, Mozilla

    {

        with (campo) {

            selectionStart = selectionEnd = value.length;

            focus();

        }

    }

    else        //Si no es ninguno de los anteriores, uso el de IE

    {

        var range = campo.createTextRange();

        range.collapse(false);

        range.select();

    }

}

////////////////// CODIGO DE TEXTBOX /////////////////////

<asp:TextBox ID="TxtMensaje" runat="server" Height="40px" Width="365px" onfocus="ponerAlfinal(this);" MaxLength="400" AutoCompleteType="Disabled"></asp:TextBox>