Wie kann ich mich an das Änderungsereignis eines Textbereichs in jQuery binden?

219

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.

Lolly
quelle
18
Die Bindung an Schlüsselereignisse reicht nicht aus, da der Text mit der Maus geändert werden kann ("Einfügen" / "Ausschneiden" aus dem Kontextmenü oder Drag & Drop).
Konstantin Smolyanin
Eine ähnliche Frage wird im Textbereich zur Erkennung von Änderungen erörtert .
dma_k

Antworten:

333

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.

Blaster
quelle
5
@Senthilnathan: Keine Arbeit in Chrome und FF auch für mich, weil es einfach nicht propertychangegibt, gibt es auchinput
Blaster
4
Beachten Sie, dass ich gerade festgestellt habe, dass keines dieser beiden Ereignisse in IE9 ausgelöst wird (ältere IE-Versionen wurden nicht überprüft), wenn die Rücktaste in einem Textbereich gedrückt wird.
Zappa
26
Diese Demos verwenden <input type="text">nicht<textarea>
Ben Collins
5
Ändern Sie 'input propertychange' in 'input change', damit es auch in IE9 funktioniert. paulbakaus.com/2012/06/14/propertychange-on-internet-explorer-9
c0D3l0g1c
11
Ich sehe, dass Sie <input type = "textarea" cols = "10" rows = "4" /> in der DEMO verwendet haben, ernsthaft?
DrLightman
142

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

Haken
quelle
3
Das on("change", function() ....Teil funktioniert nicht für mich. Löst keine Warnungen oder Konsolenprotokolle aus. Denn Keyup funktioniert allerdings wie ein Zauber.
Sebastialonso
3
@Sebastialonso: Der on("change", function() ... wird nur ausgelöst, wenn der Textbereich den Fokus verliert . Lesen Sie dazu meine frühere Frage und probieren Sie sie an dieser Geige aus - ändern Sie den Textbereich, klicken Sie dann außerhalb des Textbereichs, und Sie sollten sehen, wie das Änderungsereignis ausgelöst wird.
SNag
@SNag dieser Code funktioniert nicht auf Chrome 45, aber es funktioniert auf FF 41
DariusVE
Wenn Sie jQuery vor Version 1.7 nicht mehr verwenden können, gilt dies nicht
Code Jockey
Upvoting zur Verwendung für nicht veraltete Funktionen. Viel besser als .bind ()
Danny Harding
79

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();
  }
});
Stahlhirn
quelle
Für Internet Explorer sind 9+ oder sogar 10+ erforderlich, um ordnungsgemäß zu funktionieren.
Udi
1
Diese Lösung funktioniert wie ein Zauber. Überwindet perfekt die Grenzen der Ereignishandler change () und keypress (). Vielen Dank Gabeln.
Vickar
25

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 .

Chris Fritz
quelle
Obwohl es scheint, dass "Auswahländerung" nur funktioniert, wenn es auf das Dokument angewendet wird. Aktives Element könnte mit "document.activeElement" abgerufen werden.
Der
11

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>
Rap-2-h
quelle
4

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.

Kevinweber
quelle
2

Versuchen Sie es mit Focusout

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

Versuche dies ...

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

              // Write your code here       
 });
hungrig bleiben
quelle
7
Die Bindung an Schlüsselereignisse reicht nicht aus, da der Text mit der Maus geändert werden kann ("Einfügen" / "Ausschneiden" aus dem Kontextmenü oder Drag & Drop).
Konstantin Smolyanin
1

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

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

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.

Rooster242
quelle
-11

Versuche dies

 $('textarea').trigger('change');
 $("textarea").bind('cut paste', function(e) { });
Rajesh Tandukar
quelle
das ist nicht ganz falsch. In der Tat, wenn man das Problem kombiniert $("#textarea").on('change keyup paste', function() {})und angehen $('textarea').trigger('change');kann, das verhindert, dass es pasteautomatisch funktioniert!
Loretoparisi