miércoles, 9 de diciembre de 2015

Validar límite de caracteres en TextArea

Programando en ASP.NET me  encontré  con el problema de los TextBox  Multiline o TEXTAREA de html. Bueno el  detalle  está en que  Visual Studio (2010) no me renderiza el atributto maxlength del  control  y si el MaxLength  (el de servidor) no lo  respeta.  Y  entonces diseñé le  siguiente script  que consta de una caja de texto una etiqueta y el  evento  keydown de JavaScript

<asp:TextBox ID="txtDiagnosticoPersonal"   TextMode="MultiLine" Height="40px" onkeydown="onMaxLenght(event,20,this,'lblTotal1');" runat="server" Width="100%"></asp:TextBox>
<asp:Label ID="lblTotal1" runat="server" Text="0"></asp:Label>




function onMaxLenght2(e, numero, caja, etiqueta) {
    var keynum = window.event ? window.event.keyCode : e.which;
    if (keynum != 8)
        total = document.getElementById(caja.id).value.length + 1;
    else
        total = document.getElementById(caja.id).value.length - 1;

    if (total > numero && keynum != 8) {
        event.returnValue = false; 
    }
    else document.getElementById(etiqueta).innerText = (numero - total);
    document.getElementById(etiqueta).style.color = (total >= numero) ? 'red' : 'black';
    
    if (total > (numero + 1)) { /*Si  el  usuario pegó texto con Ctrl+V*/
        var texto = document.getElementById(caja.id).value;
        document.getElementById(caja.id).value = texto.substring(0, (numero - 1));
    }
}

Donde  20  es el número máximo de caracteres que aceptará la caja de texto y lblTotal la etiqueta que mostrará el número de caracteres restantes. La etiqueta indica cuantos caracteres se pueden aún capturar y cuando  se terminan aparece un cero en  rojo. Este script  también resta cuando se captura la tecla retroceso.
onkeydown="onMaxLenght(event,20,this,'lblTotal1');"





Este script  fué probado en Google Chrome







No hay comentarios.:

Publicar un comentario