вызвать событие при изменении contenteditable

Просто сохраните содержимое в переменной и проверьте, отличается ли оно после события blur(). Если оно отличается, сохраните новое содержимое.

var contents = $('.changeable').html();
$('.changeable').blur(function() {
    if (contents!=$(this).html()){
        alert('Handler for .change() called.');
        contents = $(this).html();
    }
});

пример: http://jsfiddle.net/niklasvh/a4QNB/

Вы можете просто использовать событие focus/blur с функцией data() jQuery:

// Find all editable content.
$('[contenteditable=true]')
    // When you click on item, record into data("initialText") content of this item.
    .focus(function() {
        $(this).data("initialText", $(this).html());
    });
    // When you leave an item...
    .blur(function() {
        // ...if content is different...
        if ($(this).data("initialText") !== $(this).html()) {
            // ... do something.
            console.log('New data when content change.');
            console.log($(this).html());
        }
    });
});

ОБНОВЛЕНИЕ: с ванильным JS

// Find all editable content.
var contents = document.querySelectorAll("[contenteditable=true]");
[].forEach.call(contents, function (content) {
    // When you click on item, record into `data-initial-text` content of this item.
    content.addEventListener("focus", function () {
        content.setAttribute("data-initial-text", content.innerHTML);
    });
    // When you leave an item...
    content.addEventListener("blur", function () {
        // ...if content is different...
        if (content.getAttribute("data-initial-text") !== content.innerHTML) {
            // ... do something.
            console.log("New data when content change.");
            console.log(content.innerHTML);
        }
    });
});

лучшим решением для этого в настоящее время является событие ввода HTML5

<div contenteditable="true" id="content"></div>

в вашем jquery.

$('#content').on('input', (e) => {
    // your code here
    alert('changed')
});

Для этого я создал плагин jQuery.

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

Вы можете просто позвонить $('.wysiwyg').wysiwygEvt();

Вы также можете удалить / добавить события, если хотите

Это проще сделать с помощью EventListener (не метод jQuery):

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

Это мой подход...

$('.changeable').focusout(function() {
  alert('Handler for .change() called.');
});

Еще одна версия в jquery. Посмотреть в jsFiddle здесь.

var $editableContent = $("#mycontent");

//  Implement on text change
$editableContent.on("focus", function(event) {$(this).data("currentText", $(this).text());});

$editableContent.on("blur", function (event) {
        if ($(this).text() != $(this).data("currentText")) {
                $(this).trigger('change');}});


//  Wire onchange event
$editableContent.on("change", function(){alert("Text changed to: " + $(this).text())});

Вот jquery-версия:

function fix_contenteditableOnchange(obj)
{
     div=$(obj);
     var contents = div.html();
     var onchange = div.attr('onchange');
     div.blur(function() {
      if (contents!=$(this).html()){
        eval(onchange);
        fix_contenteditableOnchange(obj);
      }
     });
}

Попробуйте это.

В хроме и, возможно, в других браузерах есть ошибка, когда пользователь нажимает вкладку, он создает пространство и добавляет яблочный диапазон или что-то в этом роде... чтобы удалить этого пользователя

var contents = $('.changeable').html();
$('.changeable').blur(function() {
   if (contents!=$(this).html()){
 alert('Handler for .change() called.');
      $(".Apple-tab-span").remove();
       contents = $(this).html();
       contentsTx = $(this).text();
       alert(contentsTx);

   }
});

Это удалит диапазон. Это то же самое, что и приведенный выше код, просто немного изменив его, или вы можете добавить

.Apple-tab-span
{
  Display:None;
}

и это также решит проблему.. http://jsfiddle.net/a4QNB/312/

Только что изменил ответ @Nikals ...

Еще одно решение, которое является слегка модифицированной версией предыдущих, но может быть более удобным для некоторых из вас.

Идея состоит в том, чтобы сохранить исходное значение и сравнить его с текущим значением в событии «размытие». Я сохраняю исходное значение как атрибут редактируемого тега div (вместо создания переменной для исходного значения). Использование атрибута в качестве контейнера для исходного значения более удобно, когда в таблице есть огромное количество редактируемых элементов div (в виде ячеек). Таким образом, легко получить исходное значение, поскольку вам не нужно создавать много переменных.

См. мой полный пример кода:

редактируемый раздел

<td><div contenteditable="true" class="cell" origin="originValue">originValue</div></td>

обнаружение изменений в размытии

var cells = $("#table").find('td>div[contenteditable=true]');

cells.each(function () {    

        $(this).blur(function() {

                    if ($(this).text() != $(this).attr("origin")) {
                        console.log('changed');
                    }
        });    
});

Что вам нужно сделать, так это объединить события blur и DOMSubtreeModified в элементах contenteditable.

var contentEdited = false;

function fn($el) {
  if (contentEdited) {
    var text = $el[0].innerText.trim();
    console.log(text);
    contentEdited = false;
  }
}
$("div.editable").on("blur", function() {
  fn($(this));
}).on("DOMSubtreeModified", function() {
  contentEdited = true;
});

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

<div class="editable" contenteditable="true">Click this div to edit it<div>