0

Quiero contar la cantidad de caracteres mientras se va escribiendo.

tengo esto para mi html. El textarea que quiero contar y el div para mostrar el mensaje donde se reflejaría la cantidad de caracteres utilizados

  <textarea class="form-control" class="contar" id="mensaje" maxlength="200"></textarea>
            <div id="caja">

y por otra parte, quiero contarlo con jquery. Pero no me funciona

   $( ".contar" ).keypress(function(){
        $("#caja").html("<h1>" + $(":text.contar).val().length + " Caracteres</h1>");
        });

agradezco cualquier aporte

0

2 respuestas 2

0

Puedes usar el evento onkeyup y llamar a una funcion que cuente la longitud de tu mensaje.

Por ejemplo:

const mensaje = document.querySelector('#mensaje');
const longitud = document.querySelector('#longitud');
longitud.innerHTML = `Longitud: ${mensaje.value.length}`;

const contarLongitud = () => {
  longitud.innerHTML = `Longitud: ${mensaje.value.length}`;
}
.container {
  width: 300px;
}

.container #mensaje {
  width: 100%;
  height: 80px;
}

.container #longitud {
  display: flex;
  justify-content: flex-end;
  font-weight: bold;
}
<div class="container">
  <textarea id="mensaje" maxlength="200" onkeyup="contarLongitud()"></textarea>
  <span id="longitud"></span>
</div>

1
  • No me corrió :/
    – Lilibeth
    el 2 dic. 2021 a las 4:11
0

Pude resolverlo con esto

 function contador(mensajes, idcontador){

function update_contador(idtextarea, idcontador){

    var contador = $(idcontador);
    var ta = $(mensajes);
    
    contador.html(ta.val().length);

}

$(mensajes).keyup(function(){
    update_contador(mensajes, idcontador);
});

$(mensajes).change(function(){
    update_contador(mensajes, idcontador);
});
    
}

$( document ).ready(function() {

contador("#mensajes","#longitud");

});
});

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.