Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Contar caracteres y limitar caracteres textarea

Tengo un script para compartir de contar y limitar caracteres cuando la textarea esta sin nada de texto aparece esto:

cuando escribe algo empieza a restar los caracteres:

y si llega al máximo aparece esto:

a continuación dejo el ejemplo:
mi textarea:
<form method="post" action="" class="formulario" id="Perfil" style="min-height: 500px;">
<div class="formulario-grupo">
<label for="mi"><strong>Sobre M&iacute;:&nbsp;&nbsp;<span id="info">(M&aacute;ximo 180 caracteres)</span></strong></label>
<div class="margen-abajo-5"></div>
<textarea name="mi" id="mi" onkeypress="return limita(event, 180);" onkeyup="actualizaInfo(180)" class="altura-perfil"><?php echo $menformato; ?></textarea>
</div>

</form>
onkeypress= lo que hace es limita los caracteres llamando a una funcion. limita(event, numero de caracteres máximo );
onkeyip= lo que hace actualiza los caracteres segun vayamos escribiendo. actualizaInfo(actualiza a partir de 180 hacia abajo)

la funcion limita():
 //Limitar Caracteres
 function limita(elEvento, maximoCaracteres) {
  var elemento = document.getElementById("mi");

  // Obtener la tecla pulsada 
  var evento = elEvento || window.event;
  var codigoCaracter = evento.charCode || evento.keyCode;
  // Permitir utilizar las teclas con flecha horizontal
  if(codigoCaracter == 37 || codigoCaracter == 39) {
    return true;
  }

  // Permitir borrar con la tecla Backspace y con la tecla Supr.
  if(codigoCaracter == 8 || codigoCaracter == 46) {
    return true;
  }
  else if(elemento.value.length >= maximoCaracteres ) {
    return false;
  }
  else {
    return true;
  }
}
la funcion actualizaInfo():
 //Actualiza Caracteres
function actualizaInfo(maximoCaracteres) {
  var elemento = document.getElementById("mi");
  var info = document.getElementById("info");

  if(elemento.value.length >= maximoCaracteres ) {
    info.innerHTML = "(M&aacute;ximo "+maximoCaracteres+" caracteres)";
  }
  else {
    info.innerHTML = "(Puedes escribir hasta "+(maximoCaracteres-elemento.value.length)+" caracteres adicionales)";
  }
}
2
Puntos
612
Visitas
0
Resp
Por Dannus hace 15 meses
Avanzado

Relaccionados

Para comentar Inicia sesión o Registrate