Question

我知道form.reset()会将所有表单字段重置为默认值，但这是如何工作的？

是浏览器的DOM实现吗？即浏览器知道在上一次回发/获取时从服务器发送的最后一个值是什么，当调用reset()时，浏览器会重置这些值。

Answer 1

它的DOM规范tells us：

...执行与重置按钮相同的操作。

等等HTML。根据{{3}}（仍然是草案！）：

重置表单元素表单时，用户代理必须在表单中触发一个名为reset的简单事件，该事件是可取消的，然后，如果该事件未被取消，则必须调用其形式的每个resettable元素的重置算法所有者是表格，并从表格广播形式转换事件。

每个resettable元素定义自己的重置算法。作为这些算法的一部分对表单控件所做的更改不计入用户引起的更改（因此，例如，不会导致输入事件触发）。

而latest spec（例如）是：

...将脏值标志和脏检查标志设置为false，将元素的值设置为值content属性的值，如果有，则设置空字符串，设置检查的如果元素具有已检查的内容属性，则该元素为true;如果不具有，则为false，清空所选文件的列表，然后如果type属性的当前状态定义了一个，则调用值清理算法。

基本上，reset将输入的值设置为其“值”属性（theElement.getAttribute("value")）的当前值，这可能与其当前{不同} {1}} property （value）。 "reset algorithm" for input elements

编辑：噢，Pekka指出我们Live example here.。非常酷，我宁愿使用它而不是theElement.value。 defaultValue

Answer 2

reset将使用当前HTML源代码中的值。浏览器对此请求中的最后一个请求一无所知（这将是一个巨大的安全漏洞）。

如果表单包含以下元素：

<form action="xyz">
    <input type="text" name="fieldA" />
    <input type="text" name="fieldB" value="Thingy" />
    <input type="reset" value="Click me to undo everything" />
    <input type="button" onclick="this.form.reset()" value="Click me too" />
</form>

两个按钮都会清空第一个字段，并将第二个字段的值设置为Thingy。

form.reset（）如何工作？

2 个答案: