disabled屬性阻止對元素的一切操作，例如獲取焦點(diǎn)蔚袍，點(diǎn)擊事件等等乡范。
readonly屬性只是將元素設(shè)置為只讀，其他操作正常啤咽。
參考：https://www.cnblogs.com/nangezi/p/9168228.html
一晋辆、前言
要說readonly和disabled的區(qū)別，就需要先說說兩者的聯(lián)系宇整；
兩個屬性都可以作用于input等表單元素上瓶佳，都使得元素成為“不可用”的狀態(tài)；
兩者的字面意義先介紹一下：
readonly表示“只讀”鳞青，一般表示對于文字內(nèi)容只讀霸饲，即不可更改內(nèi)容，對于非文字的表單“只讀”與“不只讀”似乎沒有啥區(qū)別臂拓；
disabled表示“使殘廢厚脉，使無效”，都?xì)垙U了胶惰，那還管你有沒有文字內(nèi)容傻工，都得殘掉。
下面來介紹介紹兩者的區(qū)別：
二、正文
-
readonly和disabled作用元素的范圍不同
image由上圖可見中捆，readonly并沒有對input[type="button"]產(chǎn)生作用鸯匹，按鈕效果仍然在，并沒有“不可用”泄伪；
而disabled直接對input[type="button"]的按鈕效果產(chǎn)生作用殴蓬，導(dǎo)致按鈕不可點(diǎn)擊。那么兩者的作用范圍區(qū)別在哪呢臂容？
disabled屬性可以作用于所有的表單元素科雳。
readonly屬性只對<input type="text">根蟹、<input type="number">脓杉、<textarea>和<input type="password">等可以輸入的表單元素有效。 -
readonly和disabled對元素的作用程度不同
image
//添加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`**屬性只是將元素設(shè)置為只讀球散，可以獲取焦點(diǎn)、失去焦點(diǎn)散庶。而**`disabled`**屬性直接阻止對元素的一切操作蕉堰。
**`disabled`**屬性阻止對元素的一切操作，例如獲取焦點(diǎn)悲龟，點(diǎn)擊事件等等屋讶。
**`readonly`**屬性只是將元素設(shè)置為只讀，其他操作正常须教。
-
readonly和disabled對表單提交的作用不同
disabled屬性可以讓表單元素的值無法被提交皿渗。
readonly屬性則不影響提交問題。
這個需要進(jìn)行測試轻腺。乐疆。。
三贬养、總結(jié)
-
readonly 屬性規(guī)定輸入字段為只讀挤土。
只讀字段是不能修改的。不過误算，用戶仍然可以使用 tab 鍵切換到該字段仰美，還可以選中或拷貝其文本。
readonly 屬性可以防止用戶對值進(jìn)行修改儿礼，直到滿足某些條件為止（比如選中了一個復(fù)選框）咖杂。然后，需要使用 JavaScript 消除 readonly 值蜘犁，將輸入字段切換到可編輯狀態(tài)翰苫。
readonly 屬性可與 <input type="text"> 或 <input type="password"> 配合使用。
-
disabled 屬性規(guī)定應(yīng)該禁用 input 元素。
被禁用的 input 元素既不可用奏窑，也不可點(diǎn)擊导披。可以設(shè)置 disabled 屬性埃唯，直到滿足某些其他的條件為止（比如選擇了一個復(fù)選框等等）撩匕。然后，就需要通過 JavaScript 來刪除 disabled 值墨叛，將 input 元素的值切換為可用止毕。
注釋：disabled 屬性無法與 <input type="hidden"> 一起使用。
