CODEWITHSUNDEEP
javascripthtmljquery
Alvin Stefanus
Alvin Stefanus

Reputation: 2153

Javascript & JQuery: How to check if undo or redo available?

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?

Upvotes: 1

Views: 661

Answers (1)

Pranav Bhat
Pranav Bhat

Reputation: 57

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>

Upvotes: 1

Related Questions