disabled和readonly屬性區別

admin發表於2018-07-29
在實際應用中，可能要設定表單元素為內容是不可更改的，標題中的兩個屬性都可以實現此功能。

程式碼如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head> 
<body> 
<input type="text" disabled value="螞蟻部落一"/>
<input type="text" readonly value="螞蟻部落一"/>
</body> 
</html>

使用兩個屬性可以將文字框設定不可更改的狀態，使用鍵盤和滑鼠不能修改文字框的內容。

兩個屬性的區別:

（1）.兩個屬性在元素上的渲染效果不同，這個一目瞭然。

（2）.disabled設定元素"不可用"，比較狠一點，元素的value屬性值不能夠通過表單提交，也不能夠使用JavaScript動態修改value屬性值，readonly設定元素為只讀，可以通過表單提交相應的值，也可以使用JavaScript動態修改value屬性值。

相關文章