Jquery 更改contenteditable时触发事件

当divs值更改时，如何触发事件

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

---

只需将内容存储到变量中，并检查

blur（）

事件之后的内容是否不同。如果不同，则存储新内容

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

---

示例：

以下是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);
      }
     });
}

试试这个。

这是我的方法

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

---

使用EventListener（不是jQuery方法）更简单：

document.getElementById（“编辑器”）.addEventListener（“输入”，函数（）{ 警报（“触发输入事件”）； }，假）；

---

为此，我构建了一个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（）

如果您愿意，您还可以删除/添加事件
另一个解决方案，它是以前的解决方案的稍微修改版本，但对您中的一些人来说可能更适合使用

其想法是保存原始值，并在“模糊”事件中将其与当前值进行比较。我将原点值保存为可编辑div标记的属性（而不是为原点值创建变量）。当表中有大量可编辑的div（作为单元格）时，使用属性作为原始值的容器更为方便。所以很容易获得原始值，因为您不需要创建很多变量

请参阅我的完整示例代码：

可编辑div

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

只需将焦点/模糊事件与jQuery的data（）函数一起使用即可：

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

在chrome和其他浏览器中可能存在bug，当用户按下tab键时，它将创建空间并附加apple be span或类似的东西。。删除该用户

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

这也将解决问题。。

刚刚修改了@Nikals答案
 jquery中的另一个版本。在jsFiddle中查看

目前最好的解决方案是


在jquery中

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

您需要做的是将
contenteditable
元素上的
blur
和
domsubtreemedited
事件结合起来


var contentEdited=false；
功能fn（$el）{
如果（内容编辑）{
var text=$el[0]。innerText.trim（）；
console.log（文本）；
contentEdited=false；
}
}
$（“div.editable”）。打开（“模糊”，函数（）{
fn（$（本））；
}).on（“domsubtreemedited”，函数（）{
contentEdited=true；
});

单击此div编辑它
函数myFunction（）{
警报（'调用了.change（）的处理程序'）；
}
单击此div编辑它
这对最近的Mozilla和WebKit浏览器很好，但遗憾的是，IE或Opera的任何版本都不支持
contenteditable
。这也可以与jquery一起使用，以便更容易地连接到类，$（'.class'）。on（'input'，function（）{}）可能重复添加了一个新答案。bind（…）
中的
那是什么？
模糊键粘贴复制剪切鼠标p
是所有潜在的更改事件
那。bind（…）
应该是
$this.bind（…）
这很好，除了HTMLLD需要在更改时更新。否则，如果它变回原来的HTMLLD，事件不会触发。为什么要递归调用？你能不能只做
contents=$（this）.html（）
？这不是一个好方法。您的原始值可能有无效的html，但浏览器将始终尝试在可编辑的div中修复它，因此即使内容没有实际更改，您的测试条件也将失败，因为浏览器已将您的
转换为

在将来，我已经为此使用了数据标记，它们工作得很好+感谢您成为我（未列出）问题“您如何检测编辑何时开始？”的唯一解决方案。。。因此，您可以显示保存按钮等。。。所有相关问题都集中在检测更改，而不是编辑会话的开始…+1，用于显示如何处理所有可编辑元素，而无需特别引用id。使用html表格创建简单的可编辑网格非常有用。非常感谢@Niklas！这是一个肮脏的黑客行为，不应该使用。修改@Niklas代码并添加新答案在我的Chrome 65上不起作用-只有在“模糊”（聚焦）时才起作用。
domsubtreedined
，因此在大多数情况下应该避免。它还可以大大降低DOM性能。此事件已被弃用-效果非常好！这可能是公认的答案-我认为这是最直接也是最好的一个。但是唯一的问题是，<代码>输入<代码>在每一个按键上被启动，而<代码>更改>代码>在输入所有输入之后被终止。对于我的情况，我需要一个改变事件而不是输入谢谢。您的解决方案帮助了我，当我在表格单元格上使用您的代码时，我想修改一个特定的列值，警报将无限期地发出。我使用了onfocus和onfocusout，同样的事情也会发生。我只想在移动到上方或下方的新单元格时捕获新值。onchange也不起作用。
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;
}

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

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