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>

仅当btnsave更改时，我才需要显示story。

kyedown和keyup由于包含功能键和其他键而无法工作。

keypress似乎还可以，但backspace和delete除外-按下时没有任何反应。

该怎么办？

Answer 1

更改

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

收件人

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

OR

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

正在运行的演示：https://codepen.io/OtakunityJL/pen/vVOvxV

Answer 2

作为上面的注释，您需要将keypress更改为input，并且如果您只想显示#btnsave与先前内容不同，则将原始内容另存为变量，然后进行比较。 / p>

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>

Answer 3

您可以将内容存储到变量中，并在blur（）事件后检查它是否不同。如果不同，则更改。 http://jsfiddle.net/maxofpower/a4QNB/850/ 另一种情况是用户可能按了键但是什么都没有改变...

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

Answer 4

要处理此类问题，可以在属性id设置为div的{{1}}失去焦点时触发事件处理程序。这可以通过在contenteditable事件上设置事件处理程序来完成。另一种方法是设置一个计时器，该计时器要等待一定的秒数，在该时间内用户没有在键盘上键入任何内容，并且手动触发禁用true并设置blur的显示属性到contenteditable

button

block

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

仅在contentEditable div更改时显示元素

4 个答案: