Question

我有一个div，其中contentediatable设置为true

<div name="" id="lbl_content_one" contenteditable="true" classref="REF_ONE"></div>

我试过

$('[classref="REF_ONE"]').change(function(){
    var elem = $(this); 
    console.log(elem.val())
    if(elem.val() != ""){
        // execute
    }
});

但它没有用。我需要在用户更改内容时触发事件。这可以使用jQuery吗？

请注意我有几个具有相同类的div，并且在更改这些div时，我需要触发事件并将div的内容更新为后端。

Answer 1

没有.change事件直接适用于contenteditable="true" div，但您可以通过以下步骤实现。

将div的HTML分配给变量contents
on blur事件再次获取div的HTML并与之进行比较变量contents
如果它不同，则意味着在div的HTML中发生了更改将新HTML分配给变量contents，然后分配给病房 HTML将在模糊事件中进行比较。
如果没有差异则没有变化。

请查看以下代码段以便更好地理解。

＆＃13;

var contents = $('#lbl_content_one').html();
$('div[classref="REF_ONE"]').on('blur',function(){
    if (contents!=$(this).html()){
        alert('Content changed.');
        contents = $(this).html();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div name="" id="lbl_content_one" contenteditable="true" classref="REF_ONE">Test</div>

＆＃13;

Answer 2

这样的事情，使用if语句会起作用：

var content = $('#lbl_content_one').val();
$(document).on('change', '#lbl_content_one', function() {
 new_content = $('#lbl_content_one').val();
 if (new_content == !content) {
  $(this).hide();
 }
});

您可以使用'change'或'keyup'或两者同时更改'keydown'。

Answer 3

在jQuery中，您可以使用事件：keyup，单击....

在纯粹的javascipt中，您可以使用MutationObserver：

MutationObserver为开发人员提供了一种对DOM中的更改做出反应的方法。它被设计为DOM3事件规范中定义的Mutation事件的替代。

为了收听您可编辑内容的变化，您必须倾听：

characterData：如果要观察目标数据的突变，则设置为true
子树：如果要观察目标和目标的后代的突变，则设置为true

必须在需要时启动观察者并在完成后停止观察：

摘录：

// Define your handler and config
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    var elem = mutation.target;
    console.log(elem.textContent);
    if(elem.textContent != ""){
      // execute
    }
  });
});
var config = { characterData: true, subtree: true };


// start the observer
observer.observe(document.getElementById('lbl_content_one'), config);

// later, you can stop observing
// observer.disconnect();

#lbl_content_one {
   border: 1px solid;
}

Start writing here:<div name="" id="lbl_content_one" contenteditable="true" classref="REF_ONE"></div>

Answer 4

您可以为keyup和keydown执行此操作。参考工作演示。这将显示每个entered和keyup的用户keydown文字。

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>

#lbl_content_one{
	width: 200px;
	height: 300px;
	border: 2px solid black;
}

</style>

<body>


<div name="" id="lbl_content_one" contenteditable="true" classref="REF_ONE"></div>

<script type="text/javascript">

$("#lbl_content_one").on('keyup keydown',function(){
	var the_text = $(this).text();
	alert(the_text);
});



</script>
</body>

</html>

有关更改div元素内容的事件

4 个答案: