Ouça as mudanças em um elemento editável de conteúdo

Aqui está o problema que tenho que resolver hoje. Temos um elemento com contenteditableatributo, para que o usuário possa editá-lo. Agora, como saber quando o usuário o alterou?

Vamos fazer um contenteditableelemento:

<div id="text" contenteditable>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at arcu ac dui eleifend suscipit a ut est. Ut iaculis ut massa non accumsan. Quisque hendrerit nisl at egestas cursus.
</div>

Nada extravagante, apenas um div simples.

Como os contenteditableelementos não possuem changeeventos, minha primeira ideia foi usar eventos-chave. É uma boa ideia, mas não foi bom para mim. Após uma pesquisa rápida, encontrei a solução – inputevento.

inputO evento é disparado quando algo em um elemento inputou textareamuda e também é disparado quando algo muda em elementos com contenteditableatributo. Perfeito!

Aqui está um exemplo de função que é disparada quando o conteúdo de contenteditableé alterado:

var editable = document.getElementById('text');
editable.addEventListener('input', function() {
    console.log('Hey, somebody changed something in my text!');
});

Você pode ler mais sobre o inputevento no MDN . Atualmente, esse recurso está disponível apenas no Chrome, Firefox 14+ e Safari.