5

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

该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()取消表单重置。

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

$('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地狱。
  • 实现一个用于重置表单的包装器，它采用回调函数或返回一个承诺对象。不过，这似乎有点矫枉过正。

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

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

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

4

1 回答 1

1

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

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

检查演示。

于 2013-07-13T08:31:29.190 回答