Восстановите предыдущее значение ввода, нажав кнопку сброса

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

Я бы использовал базовую стратегию управления состоянием с функцией debounce для восстановления захваченных значений; https://youtu.be/4Ig9zf7sX94

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

Answer 2

getElementsByTagName не даст вам значение, а скорее массив элементов, которые вы можете просмотреть. Но я предполагаю, что вы хотели выбрать поле и прочитать атрибут value. Это не сработает, потому что его значение всегда текущее значение поля.

Вы можете использовать метод reset() формы для сброса всех значений до начальных значений.

Но если вы хотите отменить изменения одно за другим, как отмена, вам придется прослушивать изменения (событие input будет охватывать ввод, вырезание и вставку), сохранять каждое изменение где-нибудь и слушать ctrl + z ( на keydown), чтобы назначить последнее сохраненное значение, когда это произойдет. Браузер уже делает это для вас, хотя ... Пожалуйста, объясните, в чем смысл этого, чтобы лучше вас понять.