表單元素中readonly和disabled的區別

1、readonly和disabled做用元素的範圍不一樣

disabled屬性能夠做用於全部的表單元素。
readonly屬性只對<input type="text">、<input type="number">、<textarea>和<input type="password">等能夠輸入的表單元素有效。

2、readonly和disabled對元素的做用程度不一樣

readonly屬性只是將元素設置爲只讀，能夠獲取焦點、失去焦點。而disabled屬性直接阻止對元素的一切操做。

disabled屬性阻止對元素的一切操做，例如獲取焦點，點擊事件等等。
readonly屬性只是將元素設置爲只讀，其餘操做正常。

3、readonly和disabled對表單提交的做用不一樣

表單元素在使用了disabled後，當咱們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，

而readonly會將該值傳遞出去（readonly接受值更改能夠回傳，disable接受改但不回傳數據）

disabled屬性可讓表單元素的值沒法被提交。
readonly屬性則不影響提交問題

總結

• readonly 屬性規定輸入字段爲只讀。

只讀字段是不能修改的。不過，用戶仍然可使用 tab 鍵切換到該字段，還能夠選中或拷貝其文本。

readonly 屬性能夠防止用戶對值進行修改，直到知足某些條件爲止（好比選中了一個複選框）。而後，須要使用 JavaScript 消除 readonly 值，將輸入字段切換到可編輯狀態。

readonly 屬性可與 <input type="text"> 或 <input type="password"> 配合使用。

• disabled 屬性規定應該禁用 input 元素。

被禁用的 input 元素既不可用，也不可點擊。能夠設置 disabled 屬性，直到知足某些其餘的條件爲止（好比選擇了一個複選框等等）。而後，就須要經過 JavaScript 來刪除 disabled 值，將 input 元素的值切換爲可用。

註釋：disabled 屬性沒法與 <input type="hidden"> 一塊兒使用。