Question

如何在表单重置后立即运行一段代码？

{/ 1}}事件在表单字段重置为默认值之前触发。所以，例如：

reset

这不起作用。（Demo）

由于$('form').on('reset', function(e) { $('input').val('a value that should be set after the form has been reset'); });事件在浏览器处理默认表单重置行为之前触发，上面的代码只是在reset事件的默认操作发生之前设置输入value，恢复输入的值为其默认值。这是有道理的，因为我可以调用reset取消表单重置。

我的用例需要在表单重置后立即执行代码。在简单的情况下，e.preventDefault()就足够了：

setTimeout

这可行，因为$('form').on('reset', function(e) { setTimeout(function() { $('input').val('yay it works now'); }, 0); });将在setTimeout完成冒泡并且浏览器已处理其默认操作后，将来某个时间执行。

然而，这会失去同步性。一旦我必须以编程方式重置表单并从另一个地方操作它，一切都会耗尽。

reset

（Demo）

当然，所有内容都应该同步发生，但只有我的$('form').on('reset', function(e) { setTimeout(function() { $('input').val("reset'd value"); }, 0); }); //somewhere in another module.. $('form').trigger('reset'); $('input').val('value after resetting the form');事件处理被推送到将来异步运行，因此它会在所有当前同步堆代码执行完毕后最终运行，当它应该在表单重置后立即运行。

我想过的解决方案：

使用另一个reset在setTimeout之后运行。这太丑了，我拒绝跳进setTimeout地狱。

实现一个包装器，用于重置表单，该表单采用回调函数或返回promise对象。这似乎有点矫枉过正。

如果只有setTimeout事件存在..那么，我是否忽略了某些事情，或者解决方案是否超出了我唯一的选择范围？

我在搜索时遇到过这些问题：

Call a function after form reset

Perform Javascript action after reset button handles click

但他们的头衔（imho）有点误导，因为这些实际上与我的问题相距甚远。

Answer 1

在您的情况下，我认为您只需为文本框指定一个默认值即可。当表单重置时，浏览器会自动将其重置为默认值。

<form>
    <input value="Abc" type="text"/>
    <input type="reset" />
</form>

检查demo。

表格重置后立即执行代码

1 个答案: