技術標籤：html

要說readonly和disabled的區別，就需要先說說兩者的聯絡；

兩個屬性都可以作用於input等表單元素上，都使得元素成為“不可用”的狀態；

兩者的字面意義先介紹一下：

readonly表示“只讀”，一般表示對於文字內容只讀，即不可更改內容，對於非文字的表單“只讀”與“不只讀”似乎沒有啥區別；

disabled表示“使殘廢，使無效”，都殘廢了，那還管你有沒有文字內容，都得殘掉。

下面來介紹介紹兩者的區別：

readonly和disabled作用元素的範圍不同

由上圖可見，readonly並沒有對input[type="button"]產生作用，按鈕效果仍然在，並沒有“不可用”；

而disabled直接對input[type="button"]的按鈕效果產生作用，導致按鈕不可點選。

那麼兩者的作用範圍區別在哪呢？

disabled屬性可以作用於所有的表單元素。

readonly屬性只對<input type="text">、<input type="number">、<textarea>和<input type="password">等可以輸入的表單元素有效。

readonly和disabled對元素的作用程度不同

//新增input===readonly
document.write('<br/><br/><input type="number" name="number1" readonly="readonly" value="button" placeholder="123456">')

//新增input===disabled
document.write('<br/><br/><input type="number" name="number2" disabled="disabled" value="button" placeholder="123456">')

//給input新增blur事件==邊框變成紅色===readonly
document.querySelector("input[name='number1']").addEventListener("blur", function(){
    document.querySelector("input[name='number1']").style.cssText = "border: 1px solid red";
})

//給input新增blur事件==邊框變成紅色===disabled
document.querySelector("input[name='number2']").addEventListener("blur", function(){
    document.querySelector("input[name='number2']").style.cssText = "border: 1px solid red";
})
 

通過上面的測試可以知道，readonly屬性只是將元素設定為只讀，可以獲取焦點、失去焦點。而disabled屬性直接阻止對元素的一切操作。

disabled屬性阻止對元素的一切操作，例如獲取焦點，點選事件等等。

readonly屬性只是將元素設定為只讀，其他操作正常。

readonly和disabled對錶單提交的作用不同

disabled屬性可以讓表單元素的值無法被提交。

readonly屬性則不影響提交問題。

總結：

readonly 屬性規定輸入欄位為只讀。

只讀欄位是不能修改的。不過，使用者仍然可以使用 tab 鍵切換到該欄位，還可以選中或拷貝其文字。

readonly 屬性可以防止使用者對值進行修改，直到滿足某些條件為止

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

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

被禁用的 input 元素既不可用，也不可點選。可以設定 disabled 屬性，直到滿足某些其他的條件為止（比如選擇了一個複選框等等）。然後，就需要通過 JavaScript 來刪除 disabled 值，將 input 元素的值切換為可用。

註釋：disabled 屬性無法與<input type="hidden"> 一起使用。

軟體開發找六牛