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之類能夠輸入文本的輸入項有效,用戶不能編輯,但鼠標仍然能夠聚焦,而且數據能夠進行傳輸
相關文章
相關標籤/搜索