javascript - 在操作 textarea 后清除 JavaScript 撤消缓冲区

Question

在我的 Web 应用程序中，我有一个 TextEditor，可以通过一些按钮进行操作。例如：

<textarea id="textareaId"></textarea>
<button onclick="add()">Click me</button>
<script>
  add() {
    document.getElementById('textareaId').value += 'some content';
  }
</script>

问题是，用户无法撤消此操作（例如通过快捷键 ctrl + z）。看起来 textarea 的撤消缓冲区被清除了。有什么方法可以在不丢失撤消选项的情况下进行更改？

Answer 1

textarea您可以使用数组作为堆栈来缓存的值：

var valuesStack = [];
var textarea = document.getElementById('textareaId');
textarea.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'z') restore();
});

function cache() {
  valuesStack.push(textarea.value);
}

function add() {
  cache();
  textarea.value += 'some content';
}

function restore() {
  var value = valuesStack.pop();
  if (value === undefined) textarea.value = "";
  else textarea.value = value;
}

<textarea id="textareaId" onchange="cache()"></textarea>
<button onclick="add()">Click me</button>