How to detect content change event on a div

Question

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

Answer 1

Do you like this? 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 change event, it's kind of pointless.

Instead, it's listening to the onkeypress event. Everytime a user changes the content of this div (by adding a character to it), it triggers the event.

You can also see how to get the character clicked (using String.fromCharCode( evt.which )).

PS: a full jQuery solution for your specific case would be this:

$( '#product_descriptioncontent' ).on( 'keypress', function() {
    $( '#your-hidden-input' ).val( $( this ).text() )
    // Or
    $( '#your-hidden-div' ).text( $( this ).text() )
} )

Answer 2

Try adding a handler for DOMCharacterDataModified. Might be a cleaner solution.

Answer 3

You can bind a custom event to the div and trigger that event upon change

Demo in Stack Snippets and 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">