web-dev-qa-db-fra.com

Comment puis-je me connecter à l'événement change d'une textarea dans jQuery?

Je veux capturer si des modifications sont survenues à <textarea>. Vous aimez taper des caractères (suppression, retour arrière) ou cliquer et coller ou couper avec la souris. Existe-t-il un événement jQuery pouvant déclencher pour tous ces événements? 

J'ai essayé le changement d'événement, mais il ne déclenche le rappel qu'après la tabulation du composant.

Utilisez : Je veux activer un bouton si un <textarea> contient du texte.

javascriptjqueryjquery-ui
195
Mojoy

Essayez ceci en fait:

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

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

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

DEMO

Cela fonctionne pour toutes les modifications que vous apportez, en tapant, en coupant, en collant.

308
Blaster

bind est obsolète. Utilisez on:

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

Remarque: le code ci-dessus sera déclenché plusieurs fois, une fois pour chaque type de déclencheur correspondant. Pour gérer cela, faites quelque chose comme ça:

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

122
SNag

Bienvenue en l’année 2015 où nous avons un nouvel événement input .

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

Cette question nécessitait une réponse plus à jour, avec des sources. C’est ce que fonctionne en fait (bien que vous n’ayez pas à prendre ma parole pour elle):

// 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: oninput dans IE9 ne se déclenche pas lorsque vous appuyez sur BACKSPACE/DEL/do CUT
3: https://msdn.Microsoft.com/en-us/library/ms536956(v=vs.85).aspx
4: http://api.jquery.com/prop/#prop-propertyName-function

BUT, pour une solution plus globale que vous pouvez utiliser tout au long de votre projet, je vous recommande d'utiliser le plugin jQuery textchange pour obtenir un nouvel événement textchange compatible avec plusieurs navigateurs. Il a été développé par la même personne qui a mis en place l’événement équivalent onChange pour ReactJS de Facebook, qu’il utilise pour la quasi-totalité de son site Web. Et je pense qu'il est prudent de dire que si c'est une solution suffisamment robuste pour Facebook, elle l'est probablement suffisamment pour vous. :-)

UPDATE: Si vous avez besoin de fonctionnalités telles que la prise en charge du glisser-déposer dans Internet Explorer, vous voudrez peut-être consulter le fork de pandell R&EACUTE;CEMMENT MIS &AGRAVE; JOUR DE jquery-splendid-textchange .

20
Chris Fritz

2018, sans JQUERY

La question est avec JQuery, c'est juste pour votre 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>
8
rap-2-h

Voici une autre version (moderne) mais légèrement différente de celles mentionnées précédemment. Testé avec IE9:

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

Pour les navigateurs obsolètes, vous pouvez également ajouter selectionchange et propertychange (comme indiqué dans d'autres réponses). Mais selectionchange n'a pas fonctionné pour moi dans IE9. C'est pourquoi j'ai ajouté keyup.

4
kevinweber

Essayez de le faire avec focusout

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

.delegate est le seul qui me travaille avec la bibliothèque JavaScript jQuery v2.1.1

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

essaye ça ...

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

              // Write your code here       
 });
1
stay_hungry

Après quelques expériences, je suis arrivé à cette implémentation:

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

Gère les modifications apportées à n’importe quel type d’entrée et sélectionne ainsi que les zones de texte sans tenir compte des touches fléchées, par exemple ctrl, cmd, touches de fonction, etc.

Remarque: je n’ai essayé cela que dans FF car c’est pour un add-on FF.

0
Rooster242