时间戳

首页 > 解决方案 > 将字段重置为默认值，无需表单

javascript - 将字段重置为默认值，无需表单

问题描述

我编写了 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();
});

标签： javascripthtmljqueryinput

解决方案

如果你不能添加一个包装<form>元素，你可以在你的编辑按钮click处理程序中添加这样的东西：

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

请参阅HTMLInputElement。

推荐阅读