contenteditable les événements de changement de

Question

Je veux exécuter une fonction lorsque l'utilisateur modifie un contenteditable div. Ce qui est l'équivalent d'un événement onchange?

Merci.

Je suis à l'aide de jquery, donc toutes les solutions qui utilise jquery est préféré. Merci!

Answer 1

Je vous suggère de fixer les auditeurs à la clé des événements déclenchés par l'élément modifiable, mais vous devez être conscient que l' keydown et keypress les événements sont déclenchés avant que le contenu lui-même est modifié, de sorte que vous devrez peut-être faire quelque chose de temporisation.

Mise à JOUR le 29 décembre 2012

Le HTML5 input événement est probablement la réponse à long terme. Au moment de la rédaction, il est pris en charge dans le courant de Mozilla (Firefox 14) et les navigateurs WebKit, mais pas IE ou Opera.

Démo: http://jsfiddle.net/ch6yn/

Answer 2

Ici est plus efficace version qui utilise on pour tous les contenteditables. Il est basé sur les réponses les plus fréquentes ici.

En CoffeeScript à l'aide de jQuery:

$('body')
    .on 'focus', '[contenteditable]', ->
        $this = $(this)
        $this.data 'before', $this.html()
        return $this
    .on 'blur keyup paste input', '[contenteditable]', ->
        $this = $(this)
        if $this.data('before') isnt $this.html()
            $this.data 'before', $this.html()
            $this.trigger('change')
        return $this

En JavaScript à l'aide de jQuery:

$('body').on('focus', '[contenteditable]', function() {
    var $this = $(this);
    $this.data('before', $this.html());
    return $this;
}).on('blur keyup paste input', '[contenteditable]', function() {
    var $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
    return $this;
});

Le projet est ici: https://github.com/balupton/html5edit

Answer 3

Pensez à utiliser MutationObserver. Ces observateurs sont conçus pour réagir à des changements dans les DOM, et en tant que performant de remplacement à la Mutation des Événements.

Pour:

• Les feux de lors de tout changement se produit, ce qui est difficile à réaliser par l'écoute des événements clés comme suggéré par d'autres réponses. Par exemple, l'ensemble de ces travaux: drag & drop, italicizing, copier/couper/coller dans le menu contextuel.
• Conçu avec des performances à l'esprit.
• Simple, simple code. Il est beaucoup plus facile à comprendre et à déboguer le code qui est à l'écoute d'un événement plutôt que de code à l'écoute de 10 événements.
• Google a une excellente mutation résumé de la bibliothèque qui rend l'utilisation de MutationObservers très facile.

Inconvénients:

• Nécessite une très récente version de Firefox (14.0+), Chrome (18+), ou IE (11+).
• Nouvelle API pour comprendre
• Pas beaucoup d'information disponible pour l'instant sur les meilleures pratiques ou des études de cas

En savoir plus:

• J'ai écrit un petit extrait de comparer à l'aide de MutationObserers pour le traitement d'une variété d'événements. J'ai utilisé balupton code depuis sa réponse a le plus upvotes.
• Mozilla a une page sur l'API
• Jetez un oeil à la MutationSummary bibliothèque

Answer 4

J'ai modifié lawwantsin 's réponse comme cela fonctionne pour moi. J'utilise l'événement keyup au lieu de la touche qui fonctionne très bien.

$('#editor').on('focus', function() {
  before = $(this).html();
}).on('blur keyup paste', function() { 
  if (before != $(this).html()) { $(this).trigger('change'); }
});

$('#editor').on('change', function() {alert('changed')});

Answer 5

Voici ce qui a fonctionné pour moi:

   var clicked = {} 
   $("[contenteditable='true']").each(function(){       
        var id = $(this).attr("id");
        $(this).bind('focus', function() {
            // store the original value of element first time it gets focus
            if(!(id in clicked)){
                clicked[id] = $(this).html()
            }
        });
   });

   // then once the user clicks on save
   $("#save").click(function(){
            for(var id in clicked){
                var original = clicked[id];
                var current = $("#"+id).html();
                // check if value changed
                if(original != current) save(id,current);
            }
   });