Firing event on changing content in div element

Question

I have a div with contentediatable set to true

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

I tried with

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

But it didnt work. I need to fire an event when user changes the content. Is this possible using jQuery?

Please note that I have several divs with same class and on change of those divs, I need to trigger the event and update the content of divs to backend.

score 1 · Answer 1 · answered Sep 17 '16 at 16:49

In jQuery you may use the events: keyup, click....

In pure javascipt, you may use MutationObserver:

MutationObserver provides developers a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Events specification.

In order to listen for changes in your content editable you have to listen for:

characterData: Set to true if mutations to target's data are to be observed
subtree: Set to true if mutations to target and target's descendants are to be observed

The observer must be started when you need and stopped when you have finished:

The snippet:

// 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>

Rahul Patel · Answer 2 · 2016-09-17T16:50:49.650

0

There is no .change event directly work for contenteditable="true" div but you can achieve it with below steps.

Assign HTML of div to a variable contents
on blur event get the div's HTML again and compare it with variable contents
If it differs that means change has occurred in div's HTML and then assign the new HTML to the variable contents and then now on wards that HTML will be compared in on blur events.
If it does not differs then no change has made.

Please check below snippet for better understanding.

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

<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>

edited Sep 17 '16 at 16:50

answered Sep 17 '16 at 16:37

Rahul Patel

5,248
2
14
26

Code without explanation helps no one! Please add an explanation to better this answer – Andrew Li Sep 17 '16 at 16:39
@AndrewL. Explanation added... – Rahul Patel Sep 17 '16 at 16:46
Please read the explanation and go through the snippet and then read the explanation again you will get clear idea what I am trying to explain. Thanks. – Rahul Patel Sep 17 '16 at 16:58
If there are several divs with the same classref attribute, this will become tricky; which infact is my case – user4826347 Sep 17 '16 at 18:46
Does anything in all those divs that make it different? – Rahul Patel Sep 17 '16 at 19:03
If yes then that thing you can use as key ane create an array and store the html in that array with that unique key and use it for comparison.. – Rahul Patel Sep 17 '16 at 19:05

luissimo · Answer 3 · 2016-09-17T17:04:57.043

0

Something like this, with an if statement would work:

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();
 }
});

You can change 'change' with 'keyup' or 'keydown' or both aswell.

edited Sep 17 '16 at 17:04

answered Sep 17 '16 at 16:43

luissimo

916
2
10
31

score 0 · Answer 4 · answered Sep 17 '16 at 16:50

you can do it for keyup and keydown. refer the working demo. that will show the user entered text for each keyup and 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>

Firing event on changing content in div element

4 Answers4