如何防止表单重置清除我的元素？

发布于 2024-09-14 21:57:02 字数 1162 浏览 2 评论 0原文

如果我在页面上放置一个已设置值的表单控件，则触发包含表单的重置功能会将值返回到加载页面时的原始值。

但是，如果我使用 javascript 创建表单控件，并将其附加到 DOM，则重置表单时，表单控件将被删除并变为空白。我怎样才能防止这种行为？我想为输入提供一个默认值，因此它将被视为与页面加载时页面上的控件相同的方式。

在以下示例中，单击 RESET 将清除一个输入（添加脚本的输入），但不会清除另一个输入（静态输入）。我想要的是两个输入都保留其价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en" lang="en">
    <head>
    </head>
    <body>
        <form id="container">
            <input type="reset" value="RESET" />
            <input type="text" value="DefaultValue" />
        </form>
        <script type="text/javascript">
        window.onload = function() {
            var input = document.createElement('input');
            input.setAttribute('value', 'DefaultValue2');
            document.getElementById('container').appendChild(input);
        };
        </script>
    </body>
</html>

虽然我没有在这个简单的测试用例中包含 jQuery，但我的项目使用 jQuery，并且我会很高兴有一个 jQuery 解决方案。

原文

If I put a form control on the page with a value already set, triggering the containing form's reset functionality will return the value to the original value at the time when the page was loaded.

However, if I create a form control using javascript, and append it to the DOM, the form control will be erased and made blank when the form is reset. How can I prevent this behavior? I would like to give the input a default value, so it will be treated the same way as a control that was on the page at page load.

In the following example, clicking RESET clears one input (the script-added one), but not the other (the static one). What I want is for both inputs to retain their value.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en" lang="en">
    <head>
    </head>
    <body>
        <form id="container">
            <input type="reset" value="RESET" />
            <input type="text" value="DefaultValue" />
        </form>
        <script type="text/javascript">
        window.onload = function() {
            var input = document.createElement('input');
            input.setAttribute('value', 'DefaultValue2');
            document.getElementById('container').appendChild(input);
        };
        </script>
    </body>
</html>

Though I have not included jQuery in this simple test case, my project uses jQuery, and I would be happy for a jQuery solution.

分享到QQ

分享到微博

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

发布评论

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

玩物 2024-09-21 21:57:03

您需要向默认“重置”输入添加更多功能，例如，您可以使用 onReset 事件来设置输入的值 = 'defaultvalue2'。这将重置两个输入字段，一个静态重置，另一个通过 onReset 方法重置。

回复收藏 0 原文

谜兔 2024-09-21 21:57:03

表单有一个 onreset 事件，根据 ppk可以跨浏览器使用。如果按下重置按钮时 Javascript 创建的元素未重置为其初始值，您可以使用该事件“手动”重置它。

但是，通过我的测试重置 javascript 创建的元素（我在示例中使用 Prototype 但它不应该）没有什么区别）可以在 Firefox 3.6 和 Chrome 5 中工作，不需要额外的 onreset 处理程序（但在 IE6 中不行）。

回复收藏 0 原文

唠甜嗑 2024-09-21 21:57:02

表单 reset() 使用 defaultValue 属性，因此您需要做的就是设置...

window.onload = function() { 
  var input = document.createElement('input');
  input.value = input.defaultValue = 'DefaultValue2';
  document.getElementById('container').appendChild(input); 
};

The form reset() uses the defaultValue property, so all you need to do is set that...

window.onload = function() { 
  var input = document.createElement('input');
  input.value = input.defaultValue = 'DefaultValue2';
  document.getElementById('container').appendChild(input); 
};

回复收藏 0 原文

~没有更多了~