如何防止表单重置清除我的 <input type="text"> 元素？答案

【问题标题】：How can I prevent a form reset from clearing my <input type="text"> element?如何防止表单重置清除我的 <input type="text"> 元素？
【发布时间】：2011-03-29 13:15:23
【问题描述】：

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

但是，如果我使用 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 解决方案。

【问题讨论】：

标签： javascript forms internet-explorer-8 internet-explorer-7 reset

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

但是，通过我的testing 重置一个 javascript 创建的元素（我在我的示例中使用 Prototype，但它不应该产生影响）在 Firefox 3.6 和 Chrome 5 中工作，不需要额外的 onreset 处理程序（但是不在 IE6 中）。

【讨论】：