Comment enregistrer du texte dans un div en utilisant JavaScript onmouseout

Question

Bonjour à tous. J'ai un div que je suis en mesure d'enregistrer du texte à quand je clique sur un bouton de sauvegarde, mais ce que je voudrais, c'est si le texte serait simplement enregistrer automatiquement sur un événement onmouseout. Par exemple:

J'ai un div et deux boutons (Enregistrer et Annuler). L'utilisateur est actuellement en mesure de passer la souris sur les données de texte en cours dans la div, cliquez sur le texte et ils peuvent ensuite modifier le texte. La seule façon de sauvegarder ce texte est de cliquer sur le bouton Enregistrer. Existe-t-il un moyen d'utiliser onmouseout pour enregistrer le texte afin que l'utilisateur doive simplement cliquer et modifier le texte, puis cliquer et le sauvegarder? Merci! Ok, donc le code ci-dessous est ce que j'ai jusqu'ici mais ça ne semble pas fonctionner. Je ne suis pas inquiet pour le code de sauvegarde b/c je l'ai déjà ailleurs. J'essaie juste de l'obtenir où je peux taper dans le texte, obtenir surBlur à feu, et avoir le HTML revenir à ce à quoi il ressemblait avant de cliquer sur le texte. En ce moment je peux cliquer dessus et la zone de texte dans le div apparaît mais quand je clique en dehors de la div, la zone de texte reste visible. Des idées?

function setClickable() { 
     $('#editInPlace').click(function() { 
      var textarea = '<div onBlur="saveChanges()><textarea rows="3" cols="30">' + $(this).html() + '</textarea>'; 
      //var button = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>'; 
      var revert = $(this).html(); 
      $(this).after(textarea).remove();   

     }) 
.mouseover(function() { 
    $(this).addClass("editable"); 
}) 
.mouseout(function() { 
    $(this).removeClass("editable"); 
    saveChanges(this, revert); 
}); 
    }; 

    function saveChanges(obj, cancel) { 
     if (!cancel) { 
      var t = $(obj).parent().siblings(0).val(); 

      //need some post code for saves 

     } 
     else { 
      var t = cancel; 
     } 
     if (t == '') t = '(click to add text)'; 
     $(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove(); 
     setClickable(); 
    } 

Answer 1

Je pense que vous voulez que l'événement onblur comme vous l'avez mentionné en cliquant en dehors de la div (et pas seulement de déplacer la souris sur):

<div contenteditable="true" onblur="saveContent()"> 
    Edit me and then click or tab out to save. 
</div> 

Tout ce que vous avez pour l'événement onclick votre bouton Enregistrer aller l'événement onblur de la div. Cela sauvera simplement le contenu quand l'élément perd le focus - il bat cependant le point d'avoir un bouton d'annulation cependant.