Détection onchange Textarea

Comment détecter un événement de modification sur textarea en utilisant javascript?
J'essaie de détecter le nombre de caractères disponibles au fur et à mesure que vous tapez.

J'ai essayé d'utiliser l'événement onchange, mais cela semble ne se déclencher que lorsque le focus est absent.

Vous devrez utiliser onkeyup et onchange pour cela. L'onchange empêchera le collage du menu contextuel, et le onkeyup se déclenchera à chaque frappe.

Voir ma réponse sur Comment imposer maxlength sur textArea pour un exemple de code.

Nous sommes en 2012, l'ère post-PC est arrivée, et nous devons encore lutter avec quelque chose d'aussi basique que celui-ci. Cela devrait être très simple .

Jusqu'à ce que ce rêve se réalise, voici la meilleure façon de le faire, cross-browser: utilisez une combinaison des événements inputetonpropertychange , comme ceci:

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' inputévénement prend en charge IE9 +, FF, Chrome, Opera et Safari , et onpropertychangeprend en charge IE8 (cela fonctionne également avec IE6 et 7, mais il y a quelques bugs).

L'avantage d'utiliser inputet onpropertychangeest qu'ils ne se déclenchent pas inutilement (comme lorsque vous appuyez sur les touches Ctrlou Shift); donc si vous souhaitez exécuter une opération relativement coûteuse lorsque le contenu de la zone de texte change, c'est la voie à suivre .

Maintenant, IE, comme toujours, fait un demi-travail de soutien: ni inputni se onpropertychangedéclenche dans IE lorsque les caractères sont supprimés de la zone de texte. Donc, si vous devez gérer la suppression de caractères dans IE, utilisez keypress(par opposition à l'utilisation de keyup/ keydown, car ils ne se déclenchent qu'une seule fois même si l'utilisateur appuie et maintient une touche enfoncée).

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

EDIT: Il semble que même la solution ci-dessus ne soit pas parfaite, comme indiqué à juste titre dans les commentaires: la présence de la addEventListenerpropriété sur la zone de texte n'implique pas que vous travaillez avec un navigateur sensé; de même, la présence de la attachEventpropriété n'implique pas IE. Si vous voulez que votre code soit vraiment étanche, vous devriez envisager de le changer. Voir le commentaire de Tim Down pour les pointeurs.

• Pour Google-Chrome, une entrée sera suffisante (Testé sur Windows 7 avec la version 22.0.1229.94 m).
• Pour IE 9, oninput capturera tout sauf couper via le menu contextuel et le retour arrière.
• Pour IE 8, onpropertychange est requis pour intercepter le collage en plus de oninput.
• Pour IE 9 + 8, onkeyup est nécessaire pour récupérer le retour arrière.
• Pour IE 9 + 8, onmousemove est le seul moyen que j'ai trouvé pour attraper la coupure via le menu contextuel

Non testé sur 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>

Je sais que ce n'est pas exactement votre question, mais j'ai pensé que cela pourrait être utile. Pour certaines applications, il est agréable que la fonction de changement ne se déclenche pas à chaque fois qu'une touche est enfoncée. Ceci peut être réalisé avec quelque chose comme ceci:

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

Cela fonctionne en testant si un événement plus récent s'est déclenché dans un certain délai. Bonne chance!

Je sais que cette question était spécifique à JavaScript, cependant, il ne semble pas y avoir de moyen efficace et propre de TOUJOURS détecter quand une zone de texte change dans tous les navigateurs actuels. J'ai appris que jquery s'en est occupé pour nous. Il gère même les modifications du menu contextuel des zones de texte. La même syntaxe est utilisée quel que soit le type d'entrée.

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

ou

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

Vous pouvez écouter l'événement lors du changement de zone de texte et effectuer les modifications que vous souhaitez. Voici un exemple.

(() => {
	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 devrait suffire s'il est associé à l'attribut de validation / modèle d'entrée HTML5. Alors, créez un modèle (regex) pour valider l'entrée et agir sur le statut .checkValidity (). Quelque chose comme ci-dessous pourrait fonctionner. Dans votre cas, vous voudriez qu'une expression régulière corresponde à la longueur. Ma solution est en cours d'utilisation / de démonstration en ligne ici .

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

Code que j'ai utilisé pour IE 11 sans jquery et juste pour une seule zone de texte:

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

et html:

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

Essaye celui-là. C'est simple, et depuis 2016, je suis sûr que cela fonctionnera sur la plupart des navigateurs.

<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 meilleure chose que vous pouvez faire est de définir une fonction à appeler sur une durée donnée et cette fonction pour vérifier le contenu de votre zone de texte.

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