5

如果我在已设置的页面上放置表单控件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 解决方案。

4

3 回答 3

12

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

window.onload = function() { 
  var input = document.createElement('input');
  input.value = input.defaultValue = 'DefaultValue2';
  document.getElementById('container').appendChild(input); 
};
于 2010-08-13T15:51:26.887 回答
0

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

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

于 2010-08-13T15:42:29.507 回答
0

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

于 2010-08-13T15:44:38.597 回答