将字段重置为默认值，无需表单答案

【问题标题】：reset field to default value without form将字段重置为默认值，无需表单
【发布时间】：2020-11-27 10:03:38
【问题描述】：

我已经编写了 jQuery 方法来更改点击时的三个按钮。

编辑、保存和取消。

当点击编辑时，我会显示输入字段的默认值。如果我更改它们并单击取消，则会再次显示编辑按钮。如果我再次点击编辑，输入字段没有重置为默认值，当我点击取消按钮时，我留下了它们。

如何在取消时再次返回它们的默认值？

<td class="text-center">
    <span class="key"> Hi </span>
    <input type="text" id="keyEdit" class="keyEdit text-center" value="Hello!" style="display: none">
</td>
<td class="text-center">
   <span class="value"> Hi Again </span>
   <input type="text" id="valueEdit" class="valueEdit text-center" value="World!" style="display: none">
 </td>

和按钮：

 <a id="edit" class="btn btn-warning edit"></a>
 <a id="save" class="btn btn-success save" style="display: none"></a>
 <a id="cancel" class="btn btn-danger cancel" style="display: none"></a>

在我的 js 文件中：

$("#my-table").on("click",".edit",function(e) {
   $(this).hide();
   $('.save, .cancel').show();

   $(".key, .value").hide();
   $(".keyEdit, .valueEdit").show();
});

$("#my-table").on("click",".cancel", function(e) {
   e.preventDefault();
   $('.edit').show();
   $('.save, .cancel').hide();

   $(".keyEdit, .valueEdit").hide();
   $(".key, .value").show();
});

【问题讨论】：

把它们放在一个表格里，然后你就可以用那个的reset方法了。如果您不想这样做，则需要读取各个字段的 defaultValue 属性，并将其分配为当前值。 developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
这些是在表格中定义的输入字段，所以在表单中执行它会很棘手。 @CBroe
我想知道用<form> 和</form> 包围现有的桌子有什么难的。
因为我在twig中有foreach，所以我认为它不会起作用。我错了吗？ @CBroe
“我错了吗？” - 假设前面的句子足以回答这个问题吗？是的，你当然是 :-)

标签： javascript html jquery input

【解决方案1】：

如果您无法添加包装 <form> 元素，您可以在编辑按钮 click 处理程序中添加类似这样的内容：

$('input').each((i,e) => {
  e.value = e.defaultValue;
});

见HTMLInputElement。

【讨论】：