jQuery - événement indiquant qu'un utilisateur a modifié le contenu d'une zone de texte

Question

J'utilise jQuery et j'effectue une itération sur une liste de projets. Chaque projet est affiché à l'écran et peut être déplacé. Chaque projet dispose également d'une zone de texte.

Code source :

$.each(data, function(id, project) {
    $('#projects').append('<div class="note" data-projectid="'+project.id+'"><textarea class="edit">'+project.text+'</textarea></div>');
});
$(".note").draggable({
    containment: "#projects", 
    scroll: false
});

Ce que je veux, c'est savoir si un utilisateur modifie le texte du projet, donc je dois savoir si le curseur quitte la zone de texte. Et j'ai besoin de connaître le nouveau texte et l'identifiant du projet, afin de pouvoir sauvegarder le nouveau texte (dans une base de données située dans le système backend).

Merci d'avance pour votre aide, Tim-.

Answer 1

Si vous voulez savoir si l'utilisateur a modifié le contenu du fichier <textarea> éléments, lieu a .delegate() sur le gestionnaire #projects qui attend un élément change dans l'événement textarea.edit éléments.

$('#projects').delegate('textarea.edit','change',function() {
    alert('was changed');
});

Cette opération n'est effectuée qu'une seule fois lors du chargement de la page. Cela fonctionnera pour tous les <textarea> que vous ajoutez à l'élément #projects contenant.

Answer 2

Lorsque le texte est modifié, le onchange a lieu et lorsque le curseur le quitte, l'événement onblur est déclenché :

$('.edit').change(function(){
  alert(this.value);
});

$('.edit').blur(function(){
  // cursor left text area
});

Answer 3

L'événement que vous recherchez est .blur() , cet événement s'exécute lorsqu'un élément perd le focus, donc par ex.

$.each(data, function(id, project) {
    $('#projects').append('<div class="note" data-projectid="'+project.id+'"><textarea class="edit">'+project.text+'</textarea></div>');
    $('textbox').blur(function() {
        $(this).val(); //gives you the current value of the box.
        //then do what you need with that info. also the project obj is still available to get project.id from
        var data-projectid = project.id

    });
});