我正在尝试使编辑器一切正常,直到现在,但现在我需要创建一个处理程序,可以检测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>
我在jsfiddle http://jsfiddle.net/bipin000/UJvxM/1/放了一些我的代码 感谢您宝贵的时间
答案 0 :(得分:4)
document.getElementById( 't' ).onkeypress = function( e ) {
var evt = e || window.event
alert( String.fromCharCode( evt.which ) )
}
它不是在等change
事件,而是毫无意义。
相反,它正在收听onkeypress
事件。每当用户更改此div的内容时(通过向其添加字符),它就会触发事件。
您还可以查看如何点击角色(使用String.fromCharCode( evt.which )
)。
PS:针对您的具体案例的完整jQuery解决方案将是:
$( '#product_descriptioncontent' ).on( 'keypress', function() {
$( '#your-hidden-input' ).val( $( this ).text() )
// Or
$( '#your-hidden-div' ).text( $( this ).text() )
} )
答案 1 :(得分:2)
试试这个example,您可以将自定义事件绑定到div并在更改时触发该事件
答案 2 :(得分:2)
尝试为DOMCharacterDataModified添加处理程序。可能是一个更清洁的解决方案。