jQuery 当 contenteditable 改变时触发事件

trigger an event when contenteditable is changed

提问by johnmosly

When a divs value is changed, how Can I trigger an event?

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

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

So when its content changes I want to create an alert and/or do other things:

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

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

采纳答案by Niklas

Just store the contents to a variable and check if it is different after blur()event. If it is different, store the new contents.

只需将内容存储到一个变量中，并在blur()事件发生后检查它是否不同。如果不同，则存储新内容。

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

example: http://jsfiddle.net/niklasvh/a4QNB/

示例：http: //jsfiddle.net/niklasvh/a4QNB/

回答by Bruno Lesieur

You can simply use focus/blur event with data() function of jQuery :

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

UPDATE: With Vanilla JS

更新：使用 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);
        }
    });
});

回答by Canaan Etai

the best solution to this currently is the HTML5 input event

目前最好的解决方案是HTML5 输入事件

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

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

in your jquery.

在你的jQuery中。

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

回答by Blowsie

I built a jQuery plugin to do this.

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

You can simply call $('.wysiwyg').wysiwygEvt();

你可以简单地打电话 $('.wysiwyg').wysiwygEvt();

You can also remove / add events if you wish

如果您愿意，您还可以删除/添加事件

回答by VasG

It's more simple to do it using EventListener (not a jQuery method):

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

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

回答by Marcel Barraza

This is my approach...

这是我的方法...

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

回答by dcapelo

Yet another version in jquery. View in jsFiddle here.

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

回答by πter

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

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

回答by Sven

Here is a jquery-version:

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

Try this out.

试试这个。

回答by nikunjM

In chrome and maybe in other browsers there is bug, when user presses tab it will create space and append apple-be span or some thing like that.. to remove that user

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

   }
});

This will remove the span.. it same as above code just modified it little, or u can add

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

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

and this will also solve problem .. http://jsfiddle.net/a4QNB/312/

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

Just modified @Nikals answer ...

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