eventi di cambiamento contenti

Voglio eseguire una funzione quando un utente modifica il contenuto di un attributo divwith contenteditable. Qual è l'equivalente di un onchangeevento?

Sto usando jQuery quindi è preferibile qualsiasi soluzione che utilizza jQuery. Grazie!

Io suggerirei di ascoltatori connessi a eventi chiave sparato dall'elemento modificabile, anche se è necessario essere consapevoli del fatto che keydowne keypresseventi vengono generati prima che il contenuto stesso è cambiato. Questo non coprirà tutti i mezzi possibili per cambiare il contenuto: l'utente può anche usare taglia, copia e incolla dai menu del browser Modifica o contestuale, quindi potresti voler gestire anche gli eventi cut copye paste. Inoltre, l'utente può rilasciare testo o altri contenuti, quindi ci sono più eventi lì ( mouseup, ad esempio). Potresti voler eseguire il polling del contenuto dell'elemento come fallback.

AGGIORNAMENTO 29 ottobre 2014

L' evento HTML5input è la risposta a lungo termine. Al momento della stesura, è supportato per contenteditableelementi negli attuali browser Mozilla (da Firefox 14) e WebKit / Blink, ma non IE.

demo:

document.getElementById("editor").addEventListener("input", function() {
    console.log("input event fired");
}, false);

<div contenteditable="true" id="editor">Please type something in here</div>

Demo: http://jsfiddle.net/ch6yn/2691/

Ecco una versione più efficiente che utilizza onper tutti gli contenteditables. Si basa sulle risposte migliori qui.

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

Il progetto è qui: https://github.com/balupton/html5edit

Prendi in considerazione l'utilizzo di MutationObserver . Questi osservatori sono progettati per reagire ai cambiamenti nel DOM e in sostituzione degli eventi di mutazione .

Professionisti:

• Viene eseguito quando qualsiasi si verifica il cambiamento, che è difficile da raggiungere con l'ascolto di eventi chiave come suggerito da altre risposte. Ad esempio, tutti questi funzionano bene: trascina e rilascia, corsivo, copia / taglia / incolla attraverso il menu contestuale.
• Progettato pensando alle prestazioni.
• Codice semplice e diretto. È molto più semplice comprendere e eseguire il debug del codice che ascolta un evento anziché il codice che ascolta 10 eventi.
• Google ha un'eccellente libreria di riepilogo delle mutazioni che rende molto semplice l'utilizzo di MutationObservers.

Contro:

• Richiede una versione molto recente di Firefox (14.0+), Chrome (18+) o IE (11+).
• Nuova API per capire
• Non ci sono ancora molte informazioni disponibili sulle migliori pratiche o casi di studio

Per saperne di più:

• Ho scritto un piccolo frammento da confrontare usando MutationObserers per gestire una varietà di eventi. Ho usato il codice balupton poiché la sua risposta ha il maggior numero di voti.
• Mozilla ha una pagina eccellente sull'API
• Dai un'occhiata alla libreria MutationSummary

Ho modificato la risposta di Lawwantsin in questo modo e questo funziona per me. Uso l'evento keyup invece di keypress che funziona alla grande.

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

risposta rapida e sporca non jQuery :

function setChangeListener (div, listener) {

    div.addEventListener("blur", listener);
    div.addEventListener("keyup", listener);
    div.addEventListener("paste", listener);
    div.addEventListener("copy", listener);
    div.addEventListener("cut", listener);
    div.addEventListener("delete", listener);
    div.addEventListener("mouseup", listener);

}

var div = document.querySelector("someDiv");

setChangeListener(div, function(event){
    console.log(event);
});

Due opzioni:

1) Per i browser moderni (sempreverdi): l'evento "input" fungerebbe da evento alternativo "change".

https://developer.mozilla.org/en-US/docs/Web/Events/input

document.querySelector('div').addEventListener('input', (e) => {
    // Do something with the "change"-like event
});

o

<div oninput="someFunc(event)"></div>

o (con jQuery)

$('div').on('click', function(e) {
    // Do something with the "change"-like event
});

2) Per tenere conto di IE11 e dei browser moderni (sempreverdi): controlla i cambiamenti degli elementi e il loro contenuto all'interno del div.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

var div = document.querySelector('div');
var divMO = new window.MutationObserver(function(e) {
    // Do something on change
});
divMO.observe(div, { childList: true, subtree: true, characterData: true });

Ecco cosa ha funzionato per me:

   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);
            }
   });

Questo thread è stato molto utile mentre stavo indagando sull'argomento.

Ho modificato parte del codice disponibile qui in un plug-in jQuery, quindi è in una forma riutilizzabile, principalmente per soddisfare le mie esigenze, ma altri potrebbero apprezzare un'interfaccia più semplice per iniziare a utilizzare tag contenteditable.

https://gist.github.com/3410122

Aggiornare:

A causa della sua crescente popolarità, il plugin è stato adottato da Makesites.org

Lo sviluppo continuerà da qui:

https://github.com/makesites/jquery-contenteditable

Ecco la soluzione che ho finito per usare e funziona favolosamente. Uso $ (this) .text () invece perché sto solo usando un div di una riga che è modificabile nel contenuto. Ma puoi anche usare .html () in questo modo non devi preoccuparti dell'ambito di una variabile globale / non globale e il precedente è effettivamente collegato al div editor.

$('body').delegate('#editor', 'focus', function(){
    $(this).data('before', $(this).html());
});
$('#client_tasks').delegate('.task_text', 'blur', function(){
    if($(this).data('before') != $(this).html()){
        /* do your stuff here - like ajax save */
        alert('I promise, I have changed!');
    }
});

Per evitare timer e pulsanti "salva", è possibile utilizzare l'evento sfocatura che si attiva quando l'elemento perde lo stato attivo. ma per essere sicuri che l'elemento sia stato effettivamente modificato (non solo focalizzato e sfocato), il suo contenuto dovrebbe essere confrontato con la sua ultima versione. oppure usa l'evento keydown per impostare un flag "sporco" su questo elemento.

Una semplice risposta in JQuery, ho appena creato questo codice e ho pensato che sarebbe stato utile anche per gli altri

    var cont;

    $("div [contenteditable=true]").focus(function() {
        cont=$(this).html();
    });

    $("div [contenteditable=true]").blur(function() {
        if ($(this).html()!=cont) {
           //Here you can write the code to run when the content change
        }           
    });

Risposta non JQuery ...

function makeEditable(elem){
    elem.setAttribute('contenteditable', 'true');
    elem.addEventListener('blur', function (evt) {
        elem.removeAttribute('contenteditable');
        elem.removeEventListener('blur', evt.target);
    });
    elem.focus();
}

Per usarlo, chiama (diciamo) un elemento header con id = "myHeader"

makeEditable(document.getElementById('myHeader'))

Quell'elemento sarà ora modificabile dall'utente fino a quando non perde lo stato attivo.

L'evento onchange non si attiva quando viene modificato un elemento con l'attributo contentEditable, un approccio suggerito potrebbe essere quello di aggiungere un pulsante, per "salvare" l'edizione.

Controlla questo plugin che gestisce il problema in questo modo:

• Creazione di un contenuto jQuery rapido e sporco Plugin modificabile

L'uso di DOMCharacterDataModified in MutationEvents porterà allo stesso. Il timeout è impostato per impedire l'invio di valori errati (ad es. In Chrome ho avuto alcuni problemi con la chiave dello spazio)

var timeoutID;
$('[contenteditable]').bind('DOMCharacterDataModified', function() {
    clearTimeout(timeoutID);
    $that = $(this);
    timeoutID = setTimeout(function() {
        $that.trigger('change')
    }, 50)
});
$('[contentEditable]').bind('change', function() {
    console.log($(this).text());
})

Esempio JSFIDDLE

Ho creato un plugin jQuery per farlo.

(function ($) {
    $.fn.wysiwygEvt = function () {
        return this.each(function () {
            var $this = $(this);
            var htmlold = $this.html();
            $this.bind('blur keyup paste copy cut mouseup', function () {
                var htmlnew = $this.html();
                if (htmlold !== htmlnew) {
                    $this.trigger('change')
                }
            })
        })
    }
})(jQuery);

Puoi semplicemente chiamare $('.wysiwyg').wysiwygEvt();

Se lo desideri, puoi anche rimuovere / aggiungere eventi

In Angular 2+

<div contentEditable (input)="type($event)">
   Value
</div>

@Component({
  ...
})
export class ContentEditableComponent {

 ...

 type(event) {
   console.log(event.data) // <-- The pressed key
   console.log(event.path[0].innerHTML) // <-- The content of the div 
 }
}

Segui la seguente semplice soluzione

In .ts:

getContent(innerText){
  this.content = innerText;
}

in .html:

<div (blur)="getContent($event.target.innerHTML)" contenteditable [innerHTML]="content"></div>

Dai un'occhiata a questa idea. http://pastie.org/1096892

Penso che sia vicino. HTML 5 deve davvero aggiungere l'evento change alle specifiche. L'unico problema è che la funzione di callback valuta se (prima == $ (questo) .html ()) prima che il contenuto sia effettivamente aggiornato in $ (questo) .html (). setTimeout non funziona ed è triste. Fatemi sapere cosa ne pensate.

Basato sulla risposta di @ balupton:

$(document).on('focus', '[contenteditable]', e => {
	const self = $(e.target)
	self.data('before', self.html())
})
$(document).on('blur', '[contenteditable]', e => {
	const self = $(e.target)
	if (self.data('before') !== self.html()) {
	  self.trigger('change')
	}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>