一、前言

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

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

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

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

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

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

二、正文

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

   
   由上圖可見，readonly並沒有對input[type="button"]產生作用，按鈕效果仍然在，並沒有“不可用”；
   而disabled直接對input[type="button"]的按鈕效果產生作用，導致按鈕不可點選。
   
   那麼兩者的作用範圍區別在哪呢？
   disabled屬性可以作用於所有的表單元素。
   readonly屬性只對<input type="text">、<input type="number">、<textarea>和<input type="password">等可以輸入的表單元素有效。
   
   

2. 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屬性只是將元素設定為只讀，其他操作正常。
   
   

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

   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"> 一起使用。