Question

我正在处理一个添加了重置按钮的表单，该按钮应允许用户转到他之前所做的更改。此原理类似于ctrl + z命令。我可以使用它，但是就我在Safari上看到的而言，它打开了上一个选项卡，这没有帮助。

我认为一种可能的方法是保存旧值并与新值进行比较。但是我想重置上一个的值，而不用默认值。

这是我的代码：

 function restoreValue(){
                var oldValue = document.getElementsByTagName('input');
                var newValue = element.value;
          
                if(oldValue == newValue)
      
                {
                    newValue = document.getElementsByTagName('input');
                    oldValue = newValue;
                    
                }

                ...........................................
            }

   input{
                width: 200px;
                border-radius: 5px;
                border: 1px solid gray;
            }
            .mandatory{
                font-weight: bold;
                color: black;
            }
            .optional{
                font-weight: normal;
                color: black;
                font-style: italic;
            }
            .warning{
                border: 1px solid yellow;
                width: 200px;
            }

     <form>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <label class="mandatory" id="lastname" name="lastname">
                                Lastname
                            </label>
                        </td>
                        <td>
                            <input id="lastname" name="lastname"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label class="mandatory" id="firstname" name="firstname">
                                Firstname
                            </label>
                        </td>
                        <td>
                            <input id="firstname" name="firstname"/>
                        </td>
                    </tr>
                  
                    <tr>
                        <td>
                            <label class="optional" id="aliasFirstname" name="aliasFirstname">
                                Alias Firstname
                            </label>
                        </td>
                        <td>
                            <input id="aliasFirstname" name="aliasFirstname"/>
                        </td>
                    </tr>
                </tbody>
            </table>
            <button type="submit">Submit</button>
            <button type="reset" onclick="">Reset</button>
        </form>

Answer 1

getElementsByTagName不会为您提供值，而是会为您提供循环的元素数组。但是我想您打算选择该字段并读取value属性。那将行不通，因为它的值总是字段的当前值。

您可以使用表单的reset()方法将所有值重置为初始值。

但是，如果您想像撤消一样逐个还原更改，则必须聆听更改（input事件将涉及键入，剪切和粘贴），将每个更改存储在某个地方，然后收听ctrl + z（在keydown上）指定发生时存储的最后一个值。浏览器已经为您完成了这项工作...请解释一下这样做的目的是为了更好地了解您。

Answer 2

我将使用带有反跳功能的基本状态管理策略来恢复捕获的值； https://youtu.be/4Ig9zf7sX94

https://gist.github.com/brianswisher/380d754794f0e7a71f068f82bc2cbc43

通过单击重置按钮恢复先前的输入值

2 个答案: