Textarea onchange de détection

Question

Comment puis-je détecter les changements de l'événement sur le textarea à l'aide de javascript?
Je suis en train d'essayer de détecter le nombre de caractères à gauche est disponible pendant que vous tapez.

J'ai essayé d'utiliser l'événement onchange, mais qui semble être la seule à coup de pied dans quand la mise au point est.

Answer 1

En 2012, l'ère post-PC est ici, et nous avons encore à se battre avec quelque chose d'aussi simple que cela. Cela devrait être très simple.

Jusqu'à ce que ce rêve est accompli, voici la meilleure façon de le faire, de la croix-navigateur: utilisez une combinaison de l' input et onpropertychange événements, comme suit:

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 soin de IE9+, FF, Chrome, Opera et Safari, et onpropertychange prend soin de IE8 (il est également compatible avec IE6 et 7, mais il y a quelques bugs).

L'avantage de l'utilisation d' input et onpropertychange , c'est qu'ils ne mettent pas le feu inutilement (comme lorsque vous appuyez sur l' Ctrl ou Shift clés); donc, si vous souhaitez exécuter une opération relativement coûteuse lorsque le textarea de la modification de contenu, c'est le chemin à parcourir.

Maintenant, c'est à dire, comme toujours, n'a qu'une moitié de l'emploi de l'appui de cette: ni input ni onpropertychange des incendies dans IE lorsque les caractères sont supprimés à partir du textarea. Donc, si vous avez besoin pour gérer la suppression de caractères dans IE, utilisez keypress (par opposition à l' keyup / keydown, parce qu'ils ont le feu une seule fois, même si l'utilisateur appuie et est titulaire d'une touche enfoncée).

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

EDIT: Il semble même que la solution ci-dessus n'est pas parfait, comme l'a justement souligné dans les commentaires: la présence de l' addEventListener de la propriété sur le textarea ne pas impliquer que vous travaillez avec un sain d'esprit navigateur; de même la présence de l' attachEvent bien ne pas impliquer IE. Si vous voulez que votre code soit vraiment étanche à l'air, vous devriez envisager de changer cela. Voir Tim en Bas du commentaire pour les pointeurs.

Answer 2

Vous aurez besoin d'utiliser onkeyup et onchange pour cette. Le onchange permettra d'éviter menu contextuel de collage, et l'onkeyup se déclenche pour chaque frappe de touche.

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

Answer 3

Pour Google-Chrome, oninput sera suffisante (Testé sur Windows 7 avec la Version 22.0.1229.94 m).
Pour IE 9, oninput va attraper tout sauf coupé par contextmenu et retour arrière.
Pour IE 8, onpropertychange est nécessaire pour attraper le collage en plus de oninput.
Pour IE 9 + 8, onkeyup est nécessaire pour attraper la touche retour arrière.
Pour IE 9 + 8, onmousemove est la seule façon que j'ai trouvée pour attraper la coupe via contextmenu

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>

Answer 4

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 d'avoir la fonction de changement de feu pour ne 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 la testant si une plus récente de l'événement a été déclenché dans un certain délai. Bonne chance!

Answer 5

Je sais que cette question est spécifique à JavaScript, cependant, il ne semble pas bon, propre façon de TOUJOURS détecter le moment où un textarea changements dans tous les navigateurs actuels. J'ai appris jquery a pris en charge pour nous. Il gère même les modifications du menu contextuel pour les 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...
    });