Detección de cambio de área de texto

¿Cómo detecto el evento de cambio en textarea usando javascript?
Estoy tratando de detectar cuántos caracteres quedan disponibles mientras escribes.

Intenté usar el evento onchange, pero parece que solo funciona cuando el foco está fuera.

Necesitará usar onkeyup y onchange para esto. El cambio evitará el pegado del menú contextual, y el encendido se activará por cada pulsación de tecla.

Vea mi respuesta sobre Cómo imponer maxlength en textArea para obtener un ejemplo de código.

Es 2012, la era posterior a la PC está aquí, y todavía tenemos que luchar con algo tan básico como esto. Esto debería ser muy simple .

Hasta el momento en que se cumpla ese sueño, esta es la mejor manera de hacerlo, navegador cruzado: use una combinación de eventos inputyonpropertychange , de esta manera:

var area = container.querySelector('textarea');
if (area.addEventListener) {
  area.addEventListener('input', function() {
    // event handling code for sane browsers
  }, false);
} else if (area.attachEvent) {
  area.attachEvent('onpropertychange', function() {
    // IE-specific event handling code
  });
}

El inputevento se encarga de IE9 +, FF, Chrome, Opera y Safari , y onpropertychangese encarga de IE8 (también funciona con IE6 y 7, pero hay algunos errores).

La ventaja de usar inputy onpropertychangees que no se disparan innecesariamente (como al presionar las teclas Ctrlo Shift); así que si desea ejecutar una operación relativamente costosa cuando el contenido del área de texto cambia, este es el camino a seguir .

Ahora IE, como siempre, hace un trabajo a medias de apoyar esto: inputni onpropertychangedispara en IE cuando los caracteres se eliminan del área de texto. Entonces, si necesita manejar la eliminación de caracteres en IE, use keypress(en lugar de usar keyup/ keydown, porque se activan solo una vez, incluso si el usuario presiona y mantiene presionada una tecla).

Fuente: http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

EDITAR: Parece que incluso la solución anterior no es perfecta, como se señala correctamente en los comentarios: la presencia de la addEventListenerpropiedad en el área de texto no implica que esté trabajando con un navegador sano; Del mismo modo, la presencia de la attachEventpropiedad no implica IE. Si desea que su código sea realmente hermético, debería considerar cambiarlo. Ver el comentario de Tim Down para los punteros.

• Para Google-Chrome, la entrada será suficiente (probado en Windows 7 con la versión 22.0.1229.94 m).
• Para IE 9, oninput capturará todo, excepto el corte a través del menú contextual y la tecla de retroceso.
• Para IE 8, se requiere onpropertychange para detectar el pegado además de oninput.
• Para IE 9 + 8, se requiere onkeyup para recuperar el retroceso.
• Para IE 9 + 8, onmousemove es la única forma en que encontré atrapar el corte a través del menú contextual

No probado en Firefox.

    var isIE = /*@cc_on!@*/false; // Note: This line breaks closure compiler...

    function SuperDuperFunction() {
        // DoSomething
    }


    function SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally() {
        if(isIE) // For Chrome, oninput works as expected
            SuperDuperFunction();
    }

<textarea id="taSource"
          class="taSplitted"
          rows="4"
          cols="50"
          oninput="SuperDuperFunction();"
          onpropertychange="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
          onmousemove="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
          onkeyup="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();">
Test
</textarea>

Sé que esta no es exactamente tu pregunta, pero pensé que podría ser útil. Para ciertas aplicaciones, es bueno tener activada la función de cambio no cada vez que se presiona una tecla. Esto se puede lograr con algo como esto:

var text = document.createElement('textarea');
text.rows = 10;
text.cols = 40;
document.body.appendChild(text);

text.onkeyup = function(){
var callcount = 0;
    var action = function(){
        alert('changed');
    }
    var delayAction = function(action, time){
        var expectcallcount = callcount;
        var delay = function(){
            if(callcount == expectcallcount){
                action();
            }
        }
        setTimeout(delay, time);
    }
    return function(eventtrigger){
        ++callcount;
        delayAction(action, 1200);
    }
}();

Esto funciona probando si un evento más reciente se ha disparado dentro de un cierto período de retraso. ¡Buena suerte!

Sé que esta pregunta era específica de JavaScript, sin embargo, parece que no hay una forma buena y limpia de detectar SIEMPRE cuándo un área de texto cambia en todos los navegadores actuales. He aprendido que jquery se ha encargado de nosotros. Incluso maneja los cambios del menú contextual en las áreas de texto. Se utiliza la misma sintaxis independientemente del tipo de entrada.

    $('div.lawyerList').on('change','textarea',function(){
      // Change occurred so count chars...
    });

o

    $('textarea').on('change',function(){
      // Change occurred so count chars...
    });

Puede escuchar el evento sobre el cambio de área de texto y hacer los cambios según lo desee. Aquí hay un ejemplo.

(() => {
	const textArea = document.getElementById('my_text_area');
  textArea.addEventListener('input', () => {
    let textLn =  textArea.value.length;
    if(textLn >= 100) {
      textArea.style.fontSize = '10pt';
    }

  })
})()

<html>
<textarea id='my_text_area' rows="4" cols="50" style="font-size:40pt">
This text will change font after 100.
</textarea>
</html>

Keyup debería ser suficiente si se combina con la validación de entrada HTML5 / atributo de patrón. Por lo tanto, cree un patrón (regex) para validar la entrada y actuar sobre el estado .checkValidity (). Algo como a continuación podría funcionar. En su caso, desearía que una expresión regular coincida con la longitud. Mi solución está en uso / habilitada para demostración en línea aquí .

<input type="text" pattern="[a-zA-Z]+" id="my-input">

var myInput = document.getElementById = "my-input";

myInput.addEventListener("keyup", function(){
  if(!this.checkValidity() || !this.value){
    submitButton.disabled = true;
  } else {
    submitButton.disabled = false;
  }
});

Código que he usado para IE 11 sin jquery y solo para un único área de texto:

Javascript:

// Impede que o comentário tenha mais de num_max caracteres
var internalChange= 0; // important, prevent reenter
function limit_char(max)
{ 
    if (internalChange == 1)
    {
        internalChange= 0;
        return;
    }
    internalChange= 1;
    // <form> and <textarea> are the ID's of your form and textarea objects
    <form>.<textarea>.value= <form>.<textarea>.value.substring(0,max);
}

y html:

<TEXTAREA onpropertychange='limit_char(5)' ...

Prueba este. Es simple, y desde 2016 estoy seguro de que funcionará en la mayoría de los navegadores.

<textarea id="text" cols="50" rows="5" onkeyup="check()" maxlength="15"></textarea> 
<div><span id="spn"></span> characters left</div>

function check(){
    var string = document.getElementById("url").value
    var left = 15 - string.length;
    document.getElementById("spn").innerHTML = left;
}

Lo mejor que puede hacer es configurar una función para que se invoque en un período de tiempo determinado y esta función para verificar el contenido de su área de texto.

self.setInterval('checkTextAreaValue()', 50);