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的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 3

我构建了一个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 4

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

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

在你的jquery中。

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

Answer 5

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

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

Answer 6

这是我的方法......

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

Answer 7

这是一个jquery-version：

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中，也许在其他浏览器中存在错误，当用户按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;
}

这也将解决问题.. 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

另一种解决方案，它是以前版本的略微修改版本，但对于你们中的一些人来说可能会更舒适。

想法是保存原点值并将其与'blur'事件中的当前值进行比较。我将原始值保存为可编辑div标签的属性（而不是为原始值创建变量）。当一个表中有大量可编辑的div（作为单元格）时，使用attribute作为原始值的容器会更加舒适。因此，您很容易获得原始值，因为您不需要创建许多变量。

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

可编辑的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 11

您需要做的是在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>

Answer 12

＆＃13;

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

＆＃13;

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

＆＃13;

当contenteditable发生变化时触发事件

12 个答案: