Javascript & JQuery：如何检查撤消或重做是否可用？

【问题标题】：Javascript & JQuery: How to check if undo or redo available?Javascript & JQuery：如何检查撤消或重做是否可用？
【发布时间】：2022-02-04 19:42:25
【问题描述】：

所以我有一个<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 按钮设置禁用。如何检查撤消或重做是否可用？

【问题讨论】：

这能回答你的问题吗？ Is there a way to determine if execCommand('undo') is executable? [JavaScript] edit: 可能不是“基于输入历史”而不是“基于浏览器”。留作参考。
是的。谢谢！

标签： javascript html jquery

【解决方案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>

【讨论】：