1. 程式人生 > >關於html元素disabled和readonly的介紹

關於html元素disabled和readonly的介紹

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框的值" onclick="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框的值" onclick="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>