CODEWITHSUNDEEP
javascriptjqueryhtml
user7461846
user7461846

Reputation:

show an element only if contentEditable div is changed

$('#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?

Upvotes: 0

Views: 70

Answers (4)

ewwink
ewwink

Reputation: 19184

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>

Upvotes: 1

Potato
Potato

Reputation: 105

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

Upvotes: 1

Yves Kipondo
Yves Kipondo

Reputation: 5623

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>

Upvotes: 0

Mohammad
Mohammad

Reputation: 1577

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

Upvotes: 0

Related Questions