代码之家 › 专栏 › 技术社区 › RMorrisey

如何防止窗体重置清除我的<input type=“text”>element?

reset internet-explorer-7 internet-explorer-8 forms javascript

RMorrisey · 技术社区 · 14 年前

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

3 回复 | 直到 14 年前

Josh Stodola 14 年前

形式 reset() 使用 defaultValue 属性,所以只需设置…

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

Eton B. 14 年前

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

Daniel Vandersluis 14 年前

表格有 onreset 事件,根据 ppk 可跨浏览器使用。如果在按下重置按钮时,javascript创建的元素没有重置为其初始值,则可以使用事件“手动”重置它。

然而,我的 testing 重置一个javascript创建的元素(在我的示例中我使用的是原型,但它不应该有什么不同)可以在火狐3.6和Chrome5中工作,而不需要额外的 OnRead 处理程序(但不在IE6中)。