JavaScript&JQuery:如何检查是否可以撤消或重做？

Question

所以我有一个<div contenteditable>。我为undo和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);
}

根据输入历史记录，我需要为undo或redo设置禁用按钮。如何检查是否可用撤消或重做？

Answer 1

您可以将其用于撤消或重做状态。

​

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>

​