So I have a <div contenteditable>. I implement buttons for undo and redo:
<button onclick="undo(event)">
<button onclick="redo(event)">
function undo(event) {
event.preventDefault();
document.execCommand('undo', false, null);
}
function redo(event) {
event.preventDefault();
document.execCommand('redo', false, null);
}
I need to set disable for undo or redo button depending on the input history. How can I check if undo or redo available?
You can use this for the undo or redo status
function check(){
if(document.queryCommandEnabled("undo"))
{
$('#undoResult').text("Undo is active");
}else{
$('#undoResult').text("Undo is not active");
}
if(document.queryCommandEnabled("redo"))
{
$('#redoResult').text("Redo is active");
}else{
$('#redoResult').text("Redo is not active");
}
}
$(document).on('keypress',function(e) {
if(e.which == 13) {
document.execCommand("insertLineBreak");
return false;
}
});
check();div{
border:1px solid black;
height:100px;
}
button{
color:white;
background:black;
height:40px;
width:49%;
padding:1px;
text-align:center;
margin-top:10px;
}
p{
font-size:30px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true">
</div>
<button onclick="document.execCommand('undo',false,null);check()" >Undo</button>
<button onclick="document.execCommand('redo',false,null); check()" >Redo</button>
<p id='undoResult'></p>
<p id='redoResult'></p>