表单重置后立即执行代码[重复]

Question

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

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

$('form').on('reset', function(e) {
    $('input').val('a value that should be set after the form has been reset');
});

这行不通。 (Demo)

由于reset 事件在浏览器处理默认表单重置行为之前触发，上面的代码只是在reset 事件的默认操作发生之前设置输入的value，将输入的值恢复为其默认值.这是有道理的，所以我可以调用e.preventDefault() 来取消表单重置。

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

$('form').on('reset', function(e) {
    setTimeout(function() {
        $('input').val('yay it works now');
    }, 0);
});

这是可行的，因为setTimeout 将在未来的某个时间执行，在reset 完成冒泡并且浏览器已处理其默认操作之后。

但是，这会失去同步性。一旦我必须以编程方式重置表单并从另一个地方操作它，一切都会付诸东流。

$('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');

(Demo)

当然，一切都应该同步发生，但只有我的 reset 事件处理被推送到将来异步运行，因此它在所有当前同步代码都执行后才运行，而应该是在表单重置后立即运行。

我考虑过的解决方案：

• 使用另一个setTimeout 在setTimeout 之后运行。这太丑陋了，我拒绝跳入setTimeout 地狱。
• 实现一个用于重置表单的包装器，它采用回调函数或返回一个承诺对象。不过，这似乎有点矫枉过正。

如果只存在 afterreset 事件。好吧，我是否忽略了某些事情，或者解决方案是我唯一的选择吗？

---

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

• Call a function after form reset
• Perform Javascript action after reset button handles click

但是他们的标题（恕我直言）有点误导，因为这些标题实际上与我的问题相去甚远。

Answer 1

在你的情况下，我认为你只是简单地为你的文本框分配一个默认值。当表单被重置时，浏览器会自动将其重置为默认值。

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

检查demo。