Question

是否可以撤消用于操纵<p>内的内容的函数？

这些功能：

//Convert input into formated metadata
function myFunction5() {
  var m1 = document.getElementById("m1")
  var str = m1.innerHTML
  var fields = [
    { regex: /B1/g, id:"bust"},
    { regex: /W1/g, id:"waist"},
    { regex: /H1/g, id:"hips"},
    { regex: /L1/g, id:"lng"},
    { regex: /S1/g, id:"shl"},
    { regex: /S2/g, id:"slv"},
    { regex: /I1/g, id:"ins"},
    { regex: /TITLE/g, id:"title"},
    { regex: /SPECIFICS/g, id:"specifics"},
    { regex: /MERC/g, id:"mercedes"},
    { regex: /SUPPLIER/g, id:"supplier"},
    { regex: /DATE/g, id:"date"},
    { regex: /WEIGHT/g, id:"weight"}]

  for (o of fields){
    var val = document.getElementById(o.id).value
    if (val != "")
      str = str.replace(o.regex, val)
    else // remove line
      str = str.replace(
        new RegExp("\\s+"+(typeof o.regex=='string'?o.regex:o.regex.source)+".*?\n")
        ,'')
  }
  m1.innerHTML = str;
}

//Convert input into formated metadata
function myFunction6() {
  var m1 = document.getElementById("m1")
  var str = m1.innerHTML
  var fields = [
    { regex: /B2/g, id:"bust"},
    { regex: /W2/g, id:"waist"},
    { regex: /H2/g, id:"hips"},
    { regex: /L2/g, id:"lng"},
    { regex: /S3/g, id:"shl"},
    { regex: /S4/g, id:"slv"},
    { regex: /I2/g, id:"ins"},
    { regex: /SPEC2/g, id:"specifics"},
    { regex: /SUPP2/g, id:"supplier"},
    { regex: /DAT2/g, id:"date"},
    { regex: /WGT2/g, id:"weight"}]

  for (o of fields){
    var val = document.getElementById(o.id).value
    if (val != "")
      str = str.replace(o.regex, val)
    else // remove line
      str = str.replace(
        new RegExp("\\s+"+(typeof o.regex=='string'?o.regex:o.regex.source)+".*?\n")
        ,'')
  }
  m1.innerHTML = str;
}

...正在使用输入/文本字段中的数据：

<p id="topmeasurement" align=left>
            <input type="text" class="topm" id="weight" name="weight" placeholder="Weight">
            <br>
            <input type="text" class="topm" id="supplier" name="supplier" placeholder="Supplier">
            <br>
            <input type="text" class="topm" id="date" name="date" placeholder="Date">
            <br>
            <textarea class="topm" id="specifics" name="specifics" placeholder="Specifics" style="height: 30px;"></textarea>
            <br>
            <textarea class="topm" id="mercedes" placeholder="Enter Any Aditional Data Here"></textarea>
            <br>
            <textarea type="text" class="topm" id="title" name="title" maxlength="80" placeholder="TITLE" style="height: 30px;"></textarea><span id="counter"></span>
            <br>
            <br>
        </p>
        <p id="botmeasurement">
            <input type="text" class="botm" id="bust" name="bust">&nbsp;Bust
            <br>
            <input type="text" class="botm" id="waist" name="waist">&nbsp;Waist
            <br>
            <input type="text" class="botm" id="hips" name="hips">&nbsp;Hips
            <br>
            <input type="text" class="botm" id="lng" name="lenght">&nbsp;Lenght
            <br>
            <input type="text" class="botm" id="shl" name="shoulders">&nbsp;Shoulders
            <br>
            <input type="text" class="botm" id="slv" name="sleeves">&nbsp;Sleeves
            <br>
            <input type="text" class="botm" id="ins" name="inseam">&nbsp;Inseam
            <br>
        </p>

...并使用以前字段中的数据更改此区域：

<p id="m1" align=center>bB2 wW2 hH2 lL2 shS3 slvS4 insI2 | SPEC2 | SUPP2 | DAT2 | WGT2
                        <br>
                        <br>TITLE
                        <br>SPECIFICS
                        <br>SUPPLIER | DATE | WEIGHT
                        <br>
                        <br>MERC
                        <br>
                        <br>B1 Bust inches flat&lt;/br&gt;
                        <br>W1 Waist inches flat&lt;/br&gt;
                        <br>H1 Hips inches flat&lt;/br&gt;
                        <br>L1 Length &lt;/br&gt;
                        <br>S1 Shoulders &lt;/br&gt;
                        <br>S2 Sleeves &lt;/br&gt;
                        <br>I1 Inseam &lt;/br&gt;
                        <br>&lt;/FONT&gt;&lt;/p&gt;
</p>

是否可以整合＆＃34; Back＆＃34;按钮可撤消对相关<p>的更改吗？

也是一个有效的jsfiddle示例：http://jsfiddle.net/jtaex1sd/

Answer 1

尝试在每次更改之前保存var中之前的innerHTML内容。

如果您创建全局变量

var tempHTML = "";

并且，正如我所看到的，您的第一个函数调用是myFunction5（），您可以添加行

tempHTML = document.getElementById("m1").innerHTML;

然后，一个新的简单功能：

function doBack() {
    document.getElementById("m1").innerHTML = tempHTML;
}

并在新按钮＆＃34;撤消＆＃34;你创造，

<button id="back-meta" onclick="doBack()">UNDO!</button>

Answer 2

Objective.js具有一个Undo类，该类允许带或不带参数的堆栈函数调用，以撤消和重做连续的动作。

https://www.objectivejs.org/en/manual/objective-js/undo

测试程序显示了一个带有简单计算器的示例。

您可以独立于Objective.js使用Undo类。

如果您对MVC感兴趣，则Undo类可以干净，简单地撤消/重做模型上的修改。 Objective.js使用它来撤消和重做编辑操作。这是一个用jQuery编写的颜色选择器编码的简单颜色编辑器：

https://www.objectivejs.org/en/manual/objective-js/editor

主页上有一些使用撤销/重做功能的更复杂的编辑器示例：

https://www.objectivejs.org

此页面显示如何编辑由Plotly提供的库制作的折线图和条形图的数据和配置参数，并查看结果：

https://www.objectivejs.org/en/configure-plotly

撤消javascript功能

2 个答案: