当contenteditable被改变时触发一个事件

当div值被改变时，我怎样才能触发一个事件？

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

所以，当它的内容改变时，我想创build一个提醒和/或做其他事情：

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

Answer 1

只需将内容存储到一个variables，并检查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/

Answer 2

我build立了一个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();

您也可以根据需要删除/添加事件

Answer 3

您可以简单地使用jQuery的data（）函数使用focus / blur事件：

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

Answer 4

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

 document.getElementById（“editor”）。addEventListener（“input”，function（）{
   警报（“input事件触发”）;
 }，false）;

Answer 5

这是我的方法…

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

Answer 6

目前最好的解决scheme是HTML5input事件

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

在你的jQuery中。

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

Answer 7

这是一个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); } }); } 

试试这个。

Answer 8

在Chrome中，也许在其他浏览器有错误，当用户按下选项卡将创build空间和追加苹果是跨度或类似的东西..删除该用户

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

这将删除跨度..它与上面的代码相同只是修改它很less，或者你可以添加

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

这也将解决问题.. http://jsfiddle.net/a4QNB/312/

刚刚修改@Nikals的答案…

Answer 9

另一个解决scheme是稍微修改过的版本，但是对于某些用户来说可能会更舒适。

想法是保存原点值，并将其与“模糊”事件中的当前值进行比较。 我将源值保存为可编辑div标签的属性（而不是为原始值创buildvariables）。 使用属性作为原始值的容器时，如果表格中有大量的可编辑div（如单元格），则会更舒适。 所以很容易获得原点值，因为您不需要创build多个variables。

看我完整的示例代码：

可编辑的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'); } }); }); 

Answer 10

还有另一个版本的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())}); 

Answer 11

你所要做的就是在DOMSubtreeModified和DOMSubtreeModified事件上创build你自己的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> 

Answer 12

 function myFunction(){ alert('Handler for .change() called.'); } 

 <div class="changeable" contenteditable="true" onfocusout="myFunction()" > Click this div to edit it <div>