Question

如果我在已设置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解决方案。

Answer 1

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

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

Answer 2

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

然而，通过我的testing重置javascript创建的元素（我在我的示例中使用Prototype但它不应该有所作为）可以在Firefox 3.6和Chrome 5中使用而无需额外的{{1}处理程序（但不是在IE6中）。

Answer 3

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

如何防止表单重置清除<input type =“text”/>元素？

3 个答案: