重置按钮处理点击后执行Javascript操作

Question

在表单元素已经重置后，我该如何立即执行一个动作？

- user541686

---

在输入框上添加一个 onclick 处理程序怎么样？ - Mrchief

HTMLFormElement.onreset会很好用。链接：http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents - user1385191

通常不建议在表单中包含重置按钮。用户经常会意外点击它们并且失去所有的工作。实际上，很少有人真正想要重置表单。 - jimbo

@Mrchief：那是在之前触发，而不是之后。 @Matt：是的，谢谢！ @jimbojm：是的，但是想要这个页面的人说他想要一个重置按钮，所以这不是我可以选择的。 :P 谢谢。 - user541686

@jimbojw？你的说法非常大胆。你可能会对UX StackExchange社区上关于重置按钮的这个讨论感兴趣。 - mapto

Answer 1

尝试：

<input type="reset" onclick="return resetForm();"/>

function resetForm(){
    setTimeout(function(){
        // do whatever
    }, 50);
    return true;
}

- ChristopheCVB

---

推迟触发函数的时间，直到表单被重置后再执行。+1 - gilly3

对于我测试过的每个浏览器，将超时设置为0就足够了。 - Gary

似乎这是重置后运行某些东西的唯一方法。 - Patricio Rossi

实际上，您不需要50毫秒，只需超时将此过程推迟到JS处理堆栈的末尾。 - Felipe Quirós

Answer 2

表单具有可以监听的reset事件。

<script>
function resetHandler() {
    // code
}
</script>
<form ... onreset="resetHandler();">
</form>

当然，这种方式添加javascript处理程序是不好的实践，所以您需要使用.addEventListener/.attachEvent或jQuery.bind()，但您已经了解了这个想法。

- digitalbath

---

resetHandler 在表单重置之前运行，而不是之后！ - Eugene Kuzmenko

问题是关于在重置完成后执行函数，而不是在之前或同时执行。这个答案是不正确的。 - Patricio Rossi

Answer 3

编写代码/事件，您希望在此函数中间调用。我已经测试过了。工作得很好。

$(document).ready(function() {
    $("input:reset").click(function() {       // apply to reset button's click event
        this.form.reset();                    // reset the form

        // call your functions to be executed after the reset      

         return false;                         // prevent reset button from resetting again
    });
});

- Somnath Muluk

---

当表单控件的名称或ID为“reset”时，重置函数会失效。 - Michael Plotke

Answer 4

您可以始终使用jQuery，或对表单重置事件本身进行一些技巧处理。

- caarlos0