当 contenteditable 改变时触发事件

Question

当一个div的值发生变化时，如何触发事件？

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

所以当它的内容发生变化时，我想创建一个警报和/或做其他事情：

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

Answer 1

只需将内容存储到一个变量中，并在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

这是一个 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 3

这是我的方法...

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

Answer 4

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

document.getElementById("editor").addEventListener("input", function() { alert("输入事件触发"); }， 错误的）;

Answer 5

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

另一种解决方案，它对以前的版本稍作修改，但对你们中的某些人来说使用起来可能更舒服。

想法是保存原始值并将其与“模糊”事件中的当前值进行比较。我将原始值保存为可编辑 div 标签的属性（而不是为原始值创建变量）。当表格中有大量可编辑的 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');
                    }
        });    
});

Answer 7

您可以简单地将焦点/模糊事件与 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());
        }
    });
});

更新：使用 Vanilla 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 8

在 chrome 和其他浏览器中可能存在错误，当用户按下选项卡时，它将创建空间并附加 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;
}

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

刚刚修改了@Nikals 的答案...

Answer 9

jquery 中的另一个版本。在 jsFiddle here 中查看。

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 10

目前最好的解决方案是 HTML5 input event

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

在你的 jquery 中。

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

Answer 11

您需要做的是在您的 contenteditable 元素上组合 blur 和 DOMSubtreeModified 事件。

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>