如何用javascript撤销操作HTML DOM元素

How to undoably manipulate HTML DOM elements with javascript?

本文关键字：HTML DOM 元素 操作 何用 javascript      更新时间：2023-09-26

假设我有一个处于contenteditable模式的元素，并且我不想对DOM进行一些操作，同时使更改不可撤销。我尝试了一般的createNode, appendChild, removeChild, setAttribute，但他们似乎不能撤销…

是否有一种方法可以使这些操作不可做?以及如何?

不要将整个元素设置为可被满足的，而是将该元素的每个子元素设置为可被满足的，例如:

<div id = 'main' >
    <div id = 'child1' ></div>
    <div id = 'child2' ></div>
</div>

这里你应该把child1和chil2设置为可被满足的，这样它们就会留在下面，你可以把元素附加到main中而不用担心它们会被删除。

将旧值存储在一个变量中，使您能够通过恢复该值来"撤消"。

您可以通过将列id和旧值以json字符串的形式保存在cookie/localstorage中来保持不可撤销状态。

humm....要做到这一点，我的意思是，我认为最好的方法是有一个函数来关注用户输入，用户输入的内容存储在一个对象中，删除的单词存储在另一个对象或数组中，然后如果用户按ctrl+z，那么另一个函数来查找最后一个退行单词并将其添加到现有文本中。这样做似乎很复杂。

<textarea id="div" contenteditable="true" >
</textarea>
<p id="p">dd </p>
css: 

#div {
    width:300px;
    height:260px;
    border:2px solid #ff9000;
}

jsvascript: 

var div = document.getElementById("div");
div.onkeypress = function(evt){
     var words = [];
    evt  = evt.keyCode;
    var event = String.fromCharCode(evt);
//    alert(event);
    words.push(event);
}

我将添加更多…这个

相关文章：