1

En el post anterior me ayudaron a resolver que la mejor manera de que no hiciera cuentas mal era usando el evento 'keyup' ya que es el momento en el que ya se ha colocado el caracter en el text area, pero con esto surge el problema que si mantengo la tecla pegada sin levantarla el contador se detiene.

Me gustaría llegar a un punto en el que el contador no haga mal las cuentas cuando se borran los caracteres ( cuando se usa keydown o keypress ) ni que se quede detenido hasta que sueltes la tecla ( cuando se usa keyup ).

Aquí el código que uso para el contador, lo mejoré con respecto a lo que me ayudaron la última vez pero tiene el problema ya mencionado.

HTML

<textarea type="text" id="txaMessage" onkeyup="countChars(this);" required></textarea>
<span id="txaCount">30</span>

JS

var maxLength = 30;
function countChars(obj){
        var strLength = obj.value.length;
        var charRemain = (maxLength - strLength);

        if(charRemain < 0){
            document.getElementById("txaCount").innerHTML = 'Has excedido el límite de '+maxLength+' caracteres';
        }else{
            document.getElementById("txaCount").innerHTML = charRemain+' restantes';
        }
    }

Como dato curioso me he dado cuenta que Firefox no resetea los formularios al actualizar la página como sí lo hace Chrome, por lo que hago un:

window.onload = function() {
    document.getElementById("contact-form").reset();
};

1 respuesta 1

3

Como la función no afecta en nada el contenido, podrías hacerla funcionar tanto en el evento keydown como en keypress:

function countChars(obj){
        var strLength = obj.value.length;
        var maxLength = obj.dataset.max;
        var charRemain = (maxLength - strLength);

        if(charRemain < 0){
            document.getElementById("txaCount").innerHTML = 'Has excedido el límite de '+maxLength+' caracteres';
        }else{
            document.getElementById("txaCount").innerHTML = charRemain+' restantes';
        }
    }
<textarea type="text" id="txaMessage" onkeypress="countChars(this);" onkeydown="countChars(this);" required data-max=30></textarea>
<span id="txaCount">30</span>

PD: Agregué el tamaño máximo en el dataset del elemento DOM.

1
  • 1
    Funciona perfectamente, nunca se me hubiera ocurrido usar los 2 eventos a la vez PD 1: Solo funciona bien con keydown y keyup a la vez PD 2: El contador de caracteres de aquí solo usa keyup
    – eriandev
    el 22 may. 2019 a las 20:00

Tu Respuesta

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

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