寫法
<input type="text" readonly>
<input type="text" disabled>
複製代碼
共同點
- 都會使文本框變成只讀,不可編輯
不一樣點
disabled
屬性在將input
文本框變成只讀不可編輯的同時,還會使文本框變灰,可是readonly
不會。
disabled
屬性修飾後的文本框內容,在不可編輯的同時,經過js也是獲取不到的。可是用readonly
修飾後的文本框內容,是能夠經過js獲取到的,也就只是簡單的不可編輯而已!
disabled
屬性對input
文本框,單選radio
,多選checkbox
都適用,可是readonly
就不適用,用它修飾後的單選以及多選按鈕仍然是能夠編輯狀態的。
disabled
屬性是能夠應用於全部的表單元素上面, 而readonly
則是隻能應用在input(text / password)
和textarea
- 表單設置
disabled
屬性以後,表單的數據不能進行傳輸,若是傳輸的話則會爲null
,而readonly
則不影響
總結
disabled
樣式會改變,對於全部的表單元素都有效,輸入項不能獲取焦點,用戶的全部操做(鼠標點擊、鍵盤輸入等)對該輸入項都無效,而且數據不能進行傳輸
readonly
只是使文本框不能輸入,外觀沒有變化,只針對input(text / password)
和textarea
之類能夠輸入文本的輸入項有效,用戶不能編輯,但鼠標仍然能夠聚焦,而且數據能夠進行傳輸