Ich möchte erfassen, ob Änderungen vorgenommen wurden <textarea>. Zum Beispiel das Eingeben von Zeichen (Löschen, Rücktaste) oder das Klicken und Einfügen oder Ausschneiden mit der Maus. Gibt es ein jQuery-Ereignis, das für all diese Ereignisse ausgelöst werden kann?

Ich habe versucht, das Ereignis zu ändern, aber es löst den Rückruf erst aus, nachdem die Komponente verlassen wurde.

Verwendung : Ich möchte eine Schaltfläche aktivieren, wenn a <textarea>Text enthält.

Versuchen Sie dies tatsächlich:

$('#textareaID').bind('input propertychange', function() {

      $("#yourBtnID").hide();

      if(this.value.length){
        $("#yourBtnID").show();
      }
});

DEMO

Das funktioniert für alle Änderungen, die Sie vornehmen, tippen, ausschneiden, einfügen.

bindist veraltet. Verwendung on:

$("#textarea").on('change keyup paste', function() {
    // your code here
});

Hinweis: Der obige Code wird mehrmals ausgelöst, einmal für jeden passenden Triggertyp. Gehen Sie dazu folgendermaßen vor:

var oldVal = "";
$("#textarea").on("change keyup paste", function() {
    var currentVal = $(this).val();
    if(currentVal == oldVal) {
        return; //check to prevent multiple simultaneous triggers
    }

    oldVal = currentVal;
    //action to be performed on textarea changed
    alert("changed!");
});

jsFiddle Demo

Verwenden Sie ein inputEreignis.

var button = $("#buttonId");
$("#textareaID").on('input',function(e){
  if(e.target.value === ''){
    // Textarea has no value
    button.hide();
  } else {
    // Textarea has a value
    button.show();
  }
});

Diese Frage musste mit Quellen aktueller beantwortet werden. Dies ist, was tatsächlich funktioniert (obwohl Sie nicht mein Wort dafür nehmen müssen):

// Storing this jQuery object outside of the event callback 
// prevents jQuery from having to search the DOM for it again
// every time an event is fired.
var $myButton = $("#buttonID")

// input           :: for all modern browsers [1]
// selectionchange :: for IE9 [2]
// propertychange  :: for <IE9 [3]
$('#textareaID').on('input selectionchange propertychange', function() {

  // This is the correct way to enable/disabled a button in jQuery [4]
  $myButton.prop('disabled', this.value.length === 0)

}

1: https://developer.mozilla.org/en-US/docs/Web/Events/input#Browser_compatibility
2: Ein Eingang in IE9 wird nicht ausgelöst, wenn wir auf BACKSPACE / DEL / do CUT
3 klicken : https: // msdn .microsoft.com / de-de / library / ms536956 (v = vs.85) .aspx
4: http://api.jquery.com/prop/#prop-propertyName-function

ABER für eine globalere Lösung, die Sie in Ihrem gesamten Projekt verwenden können , empfehle ich die Verwendung des Textchange jQuery-Plugins , um ein neues, browserübergreifendes textchangeEreignis zu erhalten. Es wurde von derselben Person entwickelt , die das entsprechende onChangeEreignis für Facebooks ReactJS implementiert hat, das sie für fast ihre gesamte Website verwenden. Und ich denke, es ist sicher zu sagen, wenn es eine ausreichend robuste Lösung für Facebook ist, ist es wahrscheinlich robust genug für Sie. :-)

UPDATE: Wenn Sie Funktionen wie Drag & Drop-Unterstützung in Internet Explorer benötigen, sollten Sie stattdessen die pandellkürzlich aktualisierte Abzweigung vonjquery-splendid-textchange überprüfen .

2018 ohne JQUERY

Die Frage ist bei JQuery, es ist nur zu Ihrer Information.

JS

let textareaID = document.getElementById('textareaID');
let yourBtnID = document.getElementById('yourBtnID');
textareaID.addEventListener('input', function() {
    yourBtnID.style.display = 'none';
    if (textareaID.value.length) {
        yourBtnID.style.display = 'inline-block';
    }
});

HTML

<textarea id="textareaID"></textarea>
<button id="yourBtnID" style="display: none;">click me</div>

Hier ist eine andere (moderne), aber etwas andere Version als die zuvor genannten. Getestet mit IE9:

$('#textareaID').on('input change keyup', function () {
  if (this.value.length) {
    // textarea has content
  } else {
    // textarea is empty
  }
});

Für veraltete Browser können Sie auch selectionchangeund hinzufügen propertychange(wie in anderen Antworten erwähnt). Hat selectionchangeaber in IE9 bei mir nicht funktioniert. Deshalb habe ich hinzugefügt keyup.

Versuchen Sie es mit Focusout

$("textarea").focusout(function() {
   alert('textarea focusout');
});

Versuche dies ...

$("#txtAreaID").bind("keyup", function(event, ui) {                          

              // Write your code here       
 });

.delegate ist die einzige, die mit jQuery JavaScript Library v2.1.1 für mich funktioniert

 $(document).delegate('#textareaID','change', function() {
          console.log("change!");
    });

Nach einigen Experimenten kam ich auf diese Implementierung:

$('.detect-change')
    .on('change cut paste', function(e) {
        console.log("Change detected.");
        contentModified = true;
    })
    .keypress(function(e) {
        if (e.which !== 0 && e.altKey == false && e.ctrlKey == false && e.metaKey == false) {
            console.log("Change detected.");
            contentModified = true;
        }
    });

Behandelt Änderungen an jeder Art von Eingabe und Auswahl sowie Textbereiche, bei denen Pfeiltasten und Dinge wie Strg, Cmd, Funktionstasten usw. ignoriert werden.

Hinweis: Ich habe dies nur in FF versucht, da es sich um ein FF-Add-On handelt.

Versuche dies

 $('textarea').trigger('change');
 $("textarea").bind('cut paste', function(e) { });