Maxlength en textareas

Enviado por admin el 22/09/2017 Deje un comentario (0) Ir a comentarios

Es habitual querer limitar el número de caracteres de los textareas, además al diseñador con el que suelo trabajar le ha dado por poner un contador al lado indicando el número de caracteres restantes que le queda al usuario por escribir. El HTML básicamente sería así:

<div>
   <textarea name="pregunta" placeholder="Escribe tu pregunta aquí" maxlength="300"></textarea>
   <span class="contador">300</span>
</div>

Y el javascript que he montado sería el siguiente:

$("textarea[maxlength]").on("propertychange input", function() {
   if (this.value.length > this.maxlength) {
      this.value = this.value.substring(0, this.maxlength);
   }else if($(this).parent().find('span.contador').length){
      $(this).parent().find('span.contador').text($(this).attr('maxlength') - this.value.length);
   }
});