Rilevazione onchange di Textarea

Come posso rilevare l'evento change su textarea usando javascript?
Sto cercando di rilevare quanti caratteri sono disponibili durante la digitazione.

Ho provato a utilizzare l'evento onchange, ma sembra che entri in azione solo quando lo stato attivo è fuori.

Dovrai usare onkeyup e onchange per questo. L'onchange impedirà l'incollaggio del menu di scelta rapida e l'onkeyup verrà attivato per ogni sequenza di tasti.

Vedi la mia risposta su Come imporre maxlength su textArea per un esempio di codice.

È il 2012, l'era post-PC è arrivata e dobbiamo ancora lottare con qualcosa di così semplice. Questo dovrebbe essere molto semplice .

Fino a quando quel sogno non sarà realizzato, ecco il modo migliore per farlo, cross-browser: usa una combinazione degli eventi inputeonpropertychange , in questo modo:

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
  });
}

L' inputevento si occupa di IE9 +, FF, Chrome, Opera e Safari e onpropertychangesi occupa di IE8 (funziona anche con IE6 e 7, ma ci sono alcuni bug).

Il vantaggio di usare inputed onpropertychangeè che non sparano inutilmente (come quando si premono i tasti Ctrlo Shift); quindi se si desidera eseguire un'operazione relativamente costosa quando cambiano i contenuti dell'area di testo, questa è la strada da percorrere .

Ora IE, come sempre, fa un lavoro a metà per sostenere questo: inputné si onpropertychangeattiva in IE quando i caratteri vengono eliminati dalla textarea. Quindi, se hai bisogno di gestire la cancellazione di caratteri in IE, usa keypress(invece di usare keyup/ keydown, perché sparano solo una volta anche se l'utente preme e tiene premuto un tasto).

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

EDIT: Sembra che anche la soluzione di cui sopra non sia perfetta, come giustamente sottolineato nei commenti: la presenza della addEventListenerproprietà nell'area di testo non implica che stai lavorando con un browser sano; allo stesso modo la presenza della attachEventproprietà non implica IE. Se vuoi che il tuo codice sia davvero a tenuta stagna, dovresti considerare di cambiarlo. Vedi il commento di Tim Down per i puntatori.

• Per Google-Chrome, oninput sarà sufficiente (testato su Windows 7 con la versione 22.0.1229.94 m).
• Per IE 9, oninput catturerà tutto tranne il taglio tramite il menu contestuale e il backspace.
• Per IE 8, onpropertychange è necessario per intercettare oltre a oninput.
• Per IE 9 + 8, onkeyup è necessario per catturare il backspace.
• Per IE 9 + 8, onmousemove è l'unico modo in cui ho scoperto di tagliare attraverso il menu contestuale

Non testato su 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>

So che questa non è esattamente la tua domanda, ma ho pensato che potesse essere utile. Per alcune applicazioni è bello avere la funzione di modifica attiva non ogni volta che si preme un tasto. Questo può essere ottenuto con qualcosa del genere:

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);
    }
}();

Funziona testando se un evento più recente è stato generato entro un certo periodo di ritardo. In bocca al lupo!

So che questa domanda era specifica di JavaScript, tuttavia, sembra che non ci sia un buon modo pulito per rilevare SEMPRE quando una textarea cambia in tutti i browser attuali. Ho imparato che jquery se ne è preso cura per noi. Gestisce anche le modifiche contestuali al menu nelle aree di testo. La stessa sintassi viene utilizzata indipendentemente dal tipo di input.

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

o

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

Puoi ascoltare l'evento al cambio di textarea ed eseguire le modifiche come desideri. Ecco un esempio

(() => {
	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>

Il keyup dovrebbe essere sufficiente se abbinato all'attributo di validazione / modello di input HTML5. Quindi, crea un modello (regex) per convalidare l'input e agire sullo stato .checkValidity (). Qualcosa come sotto potrebbe funzionare. Nel tuo caso vorresti che una regex corrispondesse alla lunghezza. La mia soluzione è in uso / demo online online qui .

<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;
  }
});

Codice che ho usato per IE 11 senza jquery e solo per una singola textarea:

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);
}

e html:

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

Prova questo. È semplice e dal 2016 sono sicuro che funzionerà sulla maggior parte dei browser.

<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;
}

La cosa migliore che puoi fare è impostare una funzione da chiamare per un determinato periodo di tempo e questa funzione per controllare il contenuto della tua textarea.

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