为什么 html 表单上的重置按钮不重置隐藏字段?

发布于 2024-11-15 10:52:37 字数 872 浏览 5 评论 0原文

我发现了一些令人惊讶的事情:

<html>
<head>
<script type="text/javascript">
function f()
{
document.getElementById("h").value++;
document.getElementById("x").value++;
}
</script>
</head>
<body>

<form>
<input type="hidden" name="hidden" id="h" value="5"/>
<input type="text" id="x" value="5"/>
<input name='clear' type='reset' id='clear' value='Clear'>
</form>

<button type="button" onclick="f()">Increment</button>
<button type="button" onclick="alert(document.getElementById('h').value)">Show hidden</button>

</body>
</html> 

在 Firefox 4.0.1 中尝试此操作,单击“清除”总是将文本输入重置为 5,但从不重置隐藏字段

我(和其他人)根本没有预料到这种行为:我们预计隐藏值也会被重置!

任何人都可以指出文档或规范来解释为什么重置按钮会以不同方式处理隐藏的输入吗?

也欢迎解释为什么这种行为是可取的。

I discovered something surprising:

<html>
<head>
<script type="text/javascript">
function f()
{
document.getElementById("h").value++;
document.getElementById("x").value++;
}
</script>
</head>
<body>

<form>
<input type="hidden" name="hidden" id="h" value="5"/>
<input type="text" id="x" value="5"/>
<input name='clear' type='reset' id='clear' value='Clear'>
</form>

<button type="button" onclick="f()">Increment</button>
<button type="button" onclick="alert(document.getElementById('h').value)">Show hidden</button>

</body>
</html> 

Trying this in Firefox 4.0.1, clicking clear always resets the text input to 5, but never resets the hidden field.

I (and others) did not expect this behavior at all: we expected the hidden value to get reset too!

Can anyone point to either documentation or specs that explain why the hidden input is treated differently by the reset button?

Explanations as to why such behavior is desirable are also welcome.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

过去的过去 2024-11-22 10:52:38

我来到这里是因为我遇到了同样的问题。然而,经过进一步思考,这(通常)是一种非常理想的行为。

隐藏字段最常用于存储页面加载时服务器发送的信息。

虽然脚本也可以使用它来输入一些运行时计算的条目,但重置隐藏字段可能会在非预期情况下引起麻烦。

I came here because I bumped into this same issue. However, upon further reflection it is (usually) a very desired behavior.

The hidden field is most commonly used for storing information that was sent by the server when the page loaded.

Although, it can also be used by the script to enter some runtime-calculated entries, resetting hidden fields can cause trouble when not intended.

毁梦 2024-11-22 10:52:38

这有点捏造,但如果您想要一个使用 formElement.reset() 函数重置的隐藏输入,请给它一个 display: none 样式。

<input type="text" name="myHiddenInput" value="default value" style="display: none">

It's a bit of a fudge, but if you want a hidden input that will reset using the formElement.reset() function, give it a display: none style instead.

<input type="text" name="myHiddenInput" value="default value" style="display: none">
翻身的咸鱼 2024-11-22 10:52:37

FWIW,我想我可以从答案和评论中整理出完整的故事。

使用理由:清除按钮用于清除用户输入,并且由于用户无法直接访问隐藏输入,因此允许用户重置隐藏输入的值是没有意义的。

文档和行为:
AR 指出的 错误报告 明确说明了正在发生的情况:隐藏字段的 < code>value 的模式是 默认,如旨在规范
特别是,这意味着更改值(如问题中的示例代码中)会更改默认值,并且重置按钮会将输入字段重置为默认值,因此没有任何更改。
文本输入的行为是不同的(即使它的值也以编程方式更改),因为它的 value 的模式不是默认的,而是 value,表示输入的默认值和当前值是有区别的。

FWIW, I think I can put together the full story from the answers and comments.

Usage rationale: The clear button is intended for clearing user input, and since hidden inputs are not directly accessible by the user, it doesn't make sense to allow the user to reset the hidden input's value.

Documentation and behavior:
The bug report that AR pointed out is explicit about what is happening: The hidden field's value's mode is default, as is intended in the specs.
Particularly, this means that changing the value (as in the sample code in the question) changes the default value, and the reset button resets input fields to the default value, hence there is no change.
The behavior for the text input is different (even though its value is also changed programmatically) because its value's mode is not default but value, which means that there is a distinction between the default value of the input and the current value.

谁的年少不轻狂 2024-11-22 10:52:37

用户无法查看或修改隐藏字段,因此他们通过按按钮清除它没有任何意义。

The user can't see or modify the hidden field, therefore it wouldn't make any sense for them to be able to clear it by pressing a button.

梦在夏天 2024-11-22 10:52:37

单击重置时,浏览器会检查 DOM 树中的默认值,而不是 HTML 页面中的默认值。

你的 Javascript 修改了 DOM。您应该尝试将 RESET 按钮替换为调用 Javascript 的自定义按钮,该 Javascript 可以执行两件事:

  • 正常重置。
  • 将隐藏字段设置为5

When clicking on reset, the browser goes and check the default value in the DOM tree, not in the HTML page.

Your Javascript modifies the DOM. You should try to replace your RESET button with a custom button that calls a Javascript that does two things:

  • reset normally.
  • set the hidden field to 5.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文