reset()方法的兼容性问题

最新推荐文章于 2023-12-05 08:57:42 发布

最新推荐文章于 2023-12-05 08:57:42 发布 · 499 阅读

文章标签：

#Chrome #IE #浏览器 #JavaScript #HTML #ViewUI

web应用专栏收录该内容

6 篇文章

订阅专栏

本文通过一个示例展示了在火狐和Chrome浏览器中使用JavaScript的reset()方法时，隐藏域(type=hidden)的值不会被重置的问题。该现象在IE浏览器中不存在。通过简单的HTML和JavaScript代码复现了这一问题。

工作中调用了reset();方法，因为我们做的项目需要兼容主流的浏览器，所以程序没问题后在火狐中测试了一下，发现表单中type="hidden"的值并没有被初始化，感觉很奇怪，多次测试后，得出reset();方法在火狐和CHROME浏览器中都存在这样的问题，IE的各个版本都没问题，测试的代码如下，有兴趣的朋友可以试试看，以后碰到这样的问题需要留心注意一下。

<html>
	<script language="javascript">
		function setValue() {
			document.getElementById("hideTest").value = "hideTest有值哦！";
			document.getElementById("test").value = "test我有值哦！";
			alert("hidden对象的值：" + document.getElementById("hideTest").value + "\n" + "text对象的值：" + document.getElementById("test").value);
		}
		function delValue() {
			document.getElementById("actionForm").reset();
			alert("hidden对象的值：" + document.getElementById("hideTest").value + "\n" + "text对象的值：" + document.getElementById("test").value);
		}
	</script>
	<body>
		<form id = "actionForm">
			<table>
				<tr>
					<td>
						<input type="hidden" id = "hideTest" name = "hideTest" />
					</td>
					<td>
						<input type="text" id = "test" name = "test" />
					</td>
					<td>
						<input type="button" value = "给对象赋值" onclick = "setValue();" />
					</td>
					<td>
						<input type="button" value = "删除对象的值" onclick = "delValue();" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>