disabled和readonly的區別

寫法

<input type="text" readonly>
<input type="text" disabled>
複製代碼

共同點

1. 都會使文本框變成只讀，不可編輯

不一樣點

1. disabled屬性在將input文本框變成只讀不可編輯的同時，還會使文本框變灰，可是readonly不會。
2. disabled屬性修飾後的文本框內容，在不可編輯的同時，經過js也是獲取不到的。可是用readonly修飾後的文本框內容，是能夠經過js獲取到的，也就只是簡單的不可編輯而已！
3. disabled屬性對input文本框，單選radio,多選checkbox都適用，可是readonly就不適用，用它修飾後的單選以及多選按鈕仍然是能夠編輯狀態的。
4. disabled屬性是能夠應用於全部的表單元素上面, 而readonly則是隻能應用在input(text / password)和textarea
5. 表單設置disabled屬性以後,表單的數據不能進行傳輸,若是傳輸的話則會爲null,而readonly則不影響

總結

1. disabled樣式會改變,對於全部的表單元素都有效,輸入項不能獲取焦點，用戶的全部操做（鼠標點擊、鍵盤輸入等）對該輸入項都無效,而且數據不能進行傳輸
2. readonly只是使文本框不能輸入，外觀沒有變化,只針對input(text / password)和textarea之類能夠輸入文本的輸入項有效,用戶不能編輯，但鼠標仍然能夠聚焦,而且數據能夠進行傳輸