表格重置后立即执行代码

Question

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

该reset事件触发前的表单字段得到重置为默认值.所以,例如:

$('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.

然而,这失去了同步性.一旦我必须以编程方式重置表单并从另一个地方操纵它,一切都会流失.

$('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.这太丑了,我拒绝陷入setTimeout地狱.
• 实现一个包装器,用于重置表单,该表单采用回调函数或返回promise对象.这看起来有点矫枉过正.

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

---

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

• 表单重置后调用函数
• 重置按钮处理单击后执行Javascript操作

但他们的头衔(imho)有点误导,因为那些实际上离我的问题很远.

Answer 1

就您而言，我认为您只需为文本框分配一个默认值即可。当表单重置时，浏览器会自动将其重置为默认值。

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

检查演示。