show an element only if contentEditable div is changed

Question

$('#story').on('keypress', function(){
 $('#btnsave').show();
});

#story{
background:gold;
min-height:54px;
padding:9px;
}

#btnsave{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='story' contentEditable='true'>lorem ipsum</div>
<br>
<button id='btnsave'>SAVE</div>

I need to show btnsave only if story is changed.

kyedown and keyup don't work because of funcional and other keys included.

keypress seems to be ok, except backspace and delete - when pressing - nothing happens.

What to do?

Possible duplicate of [contenteditable change events](https://stackoverflow.com/questions/1391278/contenteditable-change-events) — Jon Koops, Oct 01 '18 at 15:20

Potato · Answer 1 · 2018-10-01T16:04:59.563

1

Change

$('#story').on('keypress', function(){
    $('#btnsave').show();
});

To

document.getElementById("story").addEventListener("input", function() {
    $('#btnsave').show();
}, false);

OR

$('#story').on('input', (e) => {
    $('#btnsave').show();
});

Working Demo: https://codepen.io/OtakunityJL/pen/vVOvxV

edited Oct 01 '18 at 16:04

answered Oct 01 '18 at 15:24

Potato

83
1
7

1

Hi @JohnLouisDomincel. You can use `Ctrl+K` for placing your codes – vrintle Oct 01 '18 at 15:37
1

What is the benefit of removing the use of jQuery for adding the listener, but still using it to show the button? Also, I would suggest not adding things like "accept this answer if correct" to members who aren't new to the site. – Namaskar Oct 01 '18 at 15:38

ewwink · Answer 2 · 2018-10-01T16:33:27.570

as comment above you need to change keypress to input, and if you want to show only #btnsave when it different with previous content save original content as variable, then compare.

var oldContent = $('#story').text();
var myTimeout;

$('#story').on('input', function() {
  clearTimeout(myTimeout);
  myTimeout = setTimeout(function() {
    if ($('#story').text() != oldContent) {
      $('#btnsave').show();
    }
    else{
       $('#btnsave').hide();
    }
  }, 200)

});

$('#btnsave').on('click', function(){
  oldContent = $('#story').text();
   $('#btnsave').hide();
})

#story{
background:gold;
min-height:54px;
padding:9px;
}

#btnsave{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='story' contentEditable='true'>lorem ipsum</div>
<br>
<button id='btnsave'>SAVE</div>

This code tells when the content editable div has been interacted with, but not actually if the content is the same as it's original state. — Namaskar, Oct 01 '18 at 15:37

score 0 · Answer 3 · answered Oct 01 '18 at 15:22

you can store the contents to a variable and check if it is different after blur() event. If it is different, then it changed. http://jsfiddle.net/maxofpower/a4QNB/850/ another scenario is that user maybe press key but doesn't change anything...

var content = $('#story').html();
$('#story').blur(function() {
if (content!=$(this).html()){
    alert('change() called.');
    content = $(this).html();
}
});

Yves Kipondo · Answer 4 · 2018-10-01T15:48:33.110

To handle this kind is issue, you can trigger an event handler when the div with attribute contenteditable set to true loose the focus. Which can be done by setting an event handler on the blur event. The other way is to set a timer which wait a certain number of second in which a user doesn't type any thing on they keybord and manualy trigger disable the contenteditable and set the display property of the button to block

var story = document.querySelector('#story');
var btn = document.querySelector('#btnsave');
story.addEventListener('blur', function(event){
 btn.style.display = "block";
});

#btnsave {
 display: none;
}
#story{
  background:gold;
  min-height:54px;
  padding:9px;
}

<div id='story' contentEditable='true'>lorem ipsum</div>
<br>
<button id='btnsave'>SAVE</div>

show an element only if contentEditable div is changed

4 Answers4