Javascript 如何检测div上的内容更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10328102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect content change event on a div
提问by Bipin Chandra Tripathi
I am trying to make an editor everything working fine till now, but now I need to make a handler which could detect any change made in a div or any content edited in the div
我试图让编辑器到目前为止一切正常，但现在我需要制作一个处理程序，它可以检测 div 中所做的任何更改或 div 中编辑的任何内容
<?php $row="testing content" ?>
<!-- my editor section-->
<div id="editor">
<div id="options">
<span><a id="iimg">Insert Image from gallery</a></span>
<span>Upload image to gallery</span>
<span><a id="iheading">Heading</a></span>
</div>
<div id="product_descriptioncontent" contenteditable="true"><?php echo $row; ?>
</div><!-- viewable editor -->
<input type="hidden" name="textareacontent" value="" id="textareacontent" >
<!-- hidden field to submit values -->
</div>
<!-- end of editor section -->
<div id="imc"></div> <!-- image gallery loading section -->
<script>
$(document).ready(function(){
$('#iheading').click(function(){
$('#product_descriptioncontent').append('<h1>Heading</h1>');
});
$('#iimg').click(function(){
$('#imc').load('imagegallery.php',function(){
$('#gallery img').on('click',function(){
$('#product_descriptioncontent').append('<img src="http://localhost/sites/site_pics/otherpic/1.png"><br> ');
});
});
});
$('#product_descriptioncontent').change(function(){
alert("pppp");// how to capture this event
});
});
</script>
I have placed a bit of my code at jsfiddle http://jsfiddle.net/bipin000/UJvxM/1/thanks for your precious time
我在 jsfiddle http://jsfiddle.net/bipin000/UJvxM/1/ 上放了一些我的代码， 感谢您的宝贵时间
采纳答案by Florian Margaine
Do you like this? http://jsfiddle.net/Ralt/hyPQC/
你喜欢吗？http://jsfiddle.net/Ralt/hyPQC/
document.getElementById( 't' ).onkeypress = function( e ) {
var evt = e || window.event
alert( String.fromCharCode( evt.which ) )
}?
It's not waiting for a changeevent, it's kind of pointless.
它不是在等待change事件，它有点毫无意义。
Instead, it's listening to the onkeypressevent. Everytime a user changes the content of this div (by adding a character to it), it triggers the event.
相反，它正在监听onkeypress事件。每次用户更改此 div 的内容（通过向其添加字符）时，都会触发该事件。
You can also see how to get the character clicked (using String.fromCharCode( evt.which )).
您还可以看到如何点击角色（使用String.fromCharCode( evt.which )）。
PS: a full jQuery solution for your specific case would be this:
PS：针对您的特定情况的完整 jQuery 解决方案是这样的：
$( '#product_descriptioncontent' ).on( 'keypress', function() {
$( '#your-hidden-input' ).val( $( this ).text() )
// Or
$( '#your-hidden-div' ).text( $( this ).text() )
} )
回答by mihai
Try adding a handler for DOMCharacterDataModified. Might be a cleaner solution.
尝试为DOMCharacterDataModified添加处理程序。可能是一个更清洁的解决方案。
回答by Alon Eitan
You can bind a custom event to the div and trigger that event upon change
您可以将自定义事件绑定到 div 并在更改时触发该事件
Demo in Stack Snippets and jsFiddle:
Stack Snippets 和jsFiddle 中的演示：
$(function() {
$('#wrapper').bind("contentchange", function() {
console.log("Captured content change event");
});
$("#btn").click(function() {
$('#wrapper').html("new value").trigger("contentchange");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="wrapper"></div>
<input type="button" id="btn" value="click here">