1

Estoy trabajando con PHP y tengo un Textarea en donde se realiza un conteo por cada carácter ingresado, tiene un limite de 500 y muestra una alerta al superar el limite. Funciona muy bien pero tiene un problema, al copiar y pegar o cortar informacion directa en el textarea, deja de contar y se queda con el ultimo valor que se conto. Es por eso que solicito su ayuda u orientacion para resolver este problema, mi codigo es el siguiente:

 <script>
 $('#mensaje_ayuda').text('500 carácteres restantes');
  $('#observaciones').keydown(function () {
      var max = 500;
      var len = $(this).val().length;
      if (len >= max) {
          $('#mensaje_ayuda').text('Has llegado al límite');         
          $('#mensaje_ayuda').addClass('text-danger');
          $('#observaciones').addClass('is-invalid');
          $('#inputsubmit').addClass('disabled');    
          document.getElementById('inputsubmit').disabled = true;                    
      } 
      else {
          var ch = max - len;
          $('#mensaje_ayuda').text(ch + ' carácteres restantes');
          $('#mensaje_ayuda').removeClass('text-danger');            
          $('#observaciones').removeClass('is-invalid');            
          $('#inputsubmit').removeClass('disabled');
          document.getElementById('inputsubmit').disabled = false;            
      }
  }); 
</script>

   <textarea class="form-control" id="observaciones" name="observaciones" 
     placeholder="Observaciones..." rows="6" maxlength="500"></textarea> 
      <span class="help-block">
        <p id="mensaje_ayuda" class="help-block">Cuerpo del mensaje de alerta</p>
      </span>
4
  • Cambia el evento keydown por input, que considera cualquier cambio realizado en el campo.
    – Triby
    el 12 may. 2022 a las 14:26
  • Hice el cambio pero no funciono, ni siquiera cuenta lo ingresado.
    – SBK22
    el 12 may. 2022 a las 14:30
  • Para futuras ocasiones, decir "no funcionó" no significa absolutamente nada. Si pruebas yendo a editar la pregunta y mostrando "nota: ahora probé este codigo xyz y salió este otro error en la consola del navegador", posiblemente recibas respuestas más rápido
    – Alfabravo
    el 12 may. 2022 a las 14:37
  • Gracias por la sugerencia.
    – SBK22
    el 12 may. 2022 a las 14:40

2 respuestas 2

2

Como te dije en comentarios, solo tienes que cambiar el evento keydown por input y, si no funciona, revisa la consola para ver si hay errores.

Prueba este fragmento de código, comenté las líneas donde habilitas o deshabilitas el elemento inputsubmit porque no existe en el HTML y daba error.

 $('#mensaje_ayuda').text('500 carácteres restantes');
  $('#observaciones').on('input', function () {
      var max = 500;
      var len = $(this).val().length;
      if (len >= max) {
          $('#mensaje_ayuda').text('Has llegado al límite');         
          $('#mensaje_ayuda').addClass('text-danger');
          $('#observaciones').addClass('is-invalid');
          $('#inputsubmit').addClass('disabled');    
          // document.getElementById('inputsubmit').disabled = true;                    
      } 
      else {
          var ch = max - len;
          $('#mensaje_ayuda').text(ch + ' carácteres restantes');
          $('#mensaje_ayuda').removeClass('text-danger');            
          $('#observaciones').removeClass('is-invalid');            
          $('#inputsubmit').removeClass('disabled');
          // document.getElementById('inputsubmit').disabled = false;            
      }
  }); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control" id="observaciones" name="observaciones" 
     placeholder="Observaciones..." rows="6" maxlength="500"></textarea> 
<span class="help-block">
    <p id="mensaje_ayuda" class="help-block">Cuerpo del mensaje de alerta</p>
</span>

1

Pues, la cosa es que tienes que darle un nuevo listener para que escuche el evento en el que pegas, que es diferente al evento de keydown (porque es una combinación de teclas)

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <textarea class="form-control" id="observaciones" name="observaciones" 
         placeholder="Observaciones..." rows="6" maxlength="500"></textarea> 
          <span class="help-block">
            <p id="mensaje_ayuda" class="help-block">Cuerpo del mensaje de alerta</p>
          </span>
<script>

 $(document).ready(function() {    
     $('#mensaje_ayuda').text('500 carácteres restantes');
     $('#observaciones').bind('input', function () {
        var max = 500;
        var len = $(this).val().length;
        if (len >= max) {
            $('#mensaje_ayuda').text('Has llegado al límite');         
            $('#mensaje_ayuda').addClass('text-danger');
            $('#observaciones').addClass('is-invalid');
            $('#inputsubmit').addClass('disabled');    
            //document.getElementById('inputsubmit').disabled = true;                    
        } 
        else {
            var ch = max - len;
            $('#mensaje_ayuda').text(ch + ' carácteres restantes');
            $('#mensaje_ayuda').removeClass('text-danger');            
            $('#observaciones').removeClass('is-invalid');            
            $('#inputsubmit').removeClass('disabled');
            //document.getElementById('inputsubmit').disabled = false;            
        }
     });
     
 });
    </script>
    </body>
  </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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