关于html元素disabled和readonly的介绍

最新推荐文章于 2021-06-20 12:54:49 发布

iamjunjie

最新推荐文章于 2021-06-20 12:54:49 发布

阅读量2k

点赞数

分类专栏： html 代码小册子知识点

本文链接：https://blog.csdn.net/justflyhigh/article/details/11290035

版权

代码小册子同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

知识点

42 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

1、两个属性的外观区别。

2、readonly和disabled可以锁定控件，在界面上无法修改元素的值(但是通过javascript可以修改)。

3、基本上所有的元素都有disabled属性，但是不一定有readonly属性，比如select。

4、点击被readonly掉的按钮照样可以触发事件，但是被disabled掉的按钮就无法使用了不管上面有没有事件。

5、readonly的数据是可以提交到服务器的，disabled的数据是无法提交到服务器的。

从提交的url可以看出设置readonly元素值可以提交到服务器，但是设置disabled元素值无法提交到服务器。

示例代码：

<html>
	<head>
		<meta charset="utf-8" />
		<title>
			关于html元素的disabled,readonly 的详细分析
		</title>
	</head>
	<body>
		<form method="get" action="test.php">
		readonly：<input id="readonly" name="readonly" type="text" readonly="readonly" value="我被设置成了readonly" style="width:300px;" />
		<input type="button" value="修改readonly框的值" οnclick="edit('readonly', '哈哈，我能修改设置了readonly属性元素的值')" readonly="readonly" />
		<br />
		disabled：<input id="disabled" name="disabled" type="text" disabled="disabled" value="我被设置成了disabled" style="width:300px;" />
		<input type="button" value="修改disabled框的值" οnclick="edit('disabled', '哈哈，我能修改设置了disabled属性元素的值')" disabled="disabled" />
		<br />
		<input type="submit" value="提交" />
		</form>
		<script type="text/javascript">
			function edit(id, value){
				document.getElementById(id).value = value;
			}
		</script>
	</body>
</html>