Question

我希望能够检测div中是否有变化。我有两个div，一个用于标题，一个用于消息，我可以使用普通的输入方法，如textarea和文本输入，但我希望网站的外观是时尚的，而且它们看起来像普通的网页元素直到用户点击它们（我也使用CKEditor进行内联文本编辑）。

<h1 contenteditable="true" class="editable-header">A Heading</h1>

<div class="update-text" contenteditable="true">
    A message
</div>

所以我希望能够使用Jquery在其中一个框中更改某些内容时更改按钮的状态。

我尝试过使用

$(".editable-header").change( function(){
    console.log("Something has changed!");
 });

但这似乎没有发生，我也试过了

$(".editable-header").on("change", function(){});

使用可编辑的div更改此操作？如果是这样，怎么样？

Answer 1

h1不是输入元素，因此当您在h1内的内容发生变化时需要附加event，请参阅示例代码

<h1 contenteditable="true" class="editable-header">A Heading</h1>

<div class="update-text" contenteditable="true">
    A message
</div>
<input type="button" value="Change title"/>

和jQuery代码

$(".editable-header").change( function(){
    alert("Something has changed!"); 
 });

$("input[type=button]").on('click', function(){
   $(".editable-header").text("Fooo").trigger("change");
   //OR $(".editable-header").text("Fooo").change();
});

DEMO

更新评论，如果element符合要求=＆＃34; true＆＃34;然后，这个代码可以通过关键字或动态组合甚至更改内容。

$(".editable-header").on('keyup change', function(){
    alert("Something has changed!"); 
 });

Answer 2

使用input事件。

$(".editable-header").on("input", function(){console.log('edited')});

<强>更新

input在IE10-11中不起作用，这是一个报告的错误。相反，keyup也适用于IE。

$(".editable-header").keyup(callback);

function callback() {
    console.log('edited');
}

注意：同时使用这两个事件将导致回调在FF和Chrome中执行两次。

Answer 3

您可以使用模糊事件....但您需要检查它的文字是否真的发生了变化

$(".editable-header").on("blur", function(){};

Answer 4

的JavaScript

function OnEditableObjectChange(ClassName, Callback)
{
    var interval = 0;

    var elts = document.getElementsByClassName(ClassName);
    for(var i = 0; i < elts.length; ++i)
    {
        elts[i].addEventListener("focus", function(){
            var that = this;
            interval = setInterval(function(){
                Callback(that.innerHTML);
            }, 16);
        }, false);

        elts[i].addEventListener("blur", function(){
            clearInterval(interval);
        }, false);
    }
}

/* Exemple */
OnEditableObjectChange("editable-header", function(txt){
    document.getElementsByClassName("update-text")[0].innerHTML = txt;   
});

的jsfiddle

http://jsfiddle.net/4quo0ho2/

它是否符合您的需求？：）

（对不起，如果我的英语不是很好，我就是法语^^）

检查可编辑div中的状态更改

4 个答案: