input標籤 disabled 和 readonly的區別

需求描述：今天提交代碼，老大審了一下，給我指出了一個改正的地方，XXX的詳細信息頁面(不是修改頁面) input的內容是不能改的，給我指出的時候，我立馬就知道了這個該怎麼改了，加個readonly不就好了  (*^▽^*)^_^。

解決思路：潛意識反應的就是 readonly屬性設置爲true  可是又想起來了 之前好像也用過disabled，先後把這兩個都試了一下，效果是同樣的，都不能改動了，可是這畢竟是兩個屬性，確定是有差異的了，而後就度娘了一下，最後擺連接。

代碼：這個就不貼了吧，就是簡單的一個屬性設置一下，下邊直接說說他們的區別，厚臉皮的把別人的東西down過來╭(╯^╰)╮╮(╯▽╰)╭

內容：

• Readonly只針對input(text / password)和textarea有效，而disabled對於全部的表單元素都有效

• 可是表單元素在使用了disabled後，當咱們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去（readonly接受值更改能夠回傳，disable接受改但不回傳數據）。

共同之處：就是個人這種狀況了，用input接收的不可變的內容，無論是readonly=「true」  仍是disabled=「disabled」，都行。

仍是說說區別吧：

• 若是一個輸入項的disabled設爲true，則該表單輸入項不能獲取焦點，用戶的全部操做（鼠標點擊和鍵盤輸入等）對該輸入項都無效，最重要的一點是當提交表單時，這個表單輸入項將不會被提交。 
• readonly只是針對文本輸入框這類能夠輸入文本的輸入項，若是設爲true，用戶只是不能編輯對應的文本，可是仍然能夠聚焦焦點，而且在提交表單的時候，該輸入項會做爲form的一項提交。

用法：不得不說人家總結的是真的好！場景都是很經常使用的，帥，(๑•̀ㅂ•́)و✧୧(๑•̀◡•́๑)૭

• 在某個表單中爲用戶預填了某個惟一識別代碼，不容許用戶改動，可是在提交時須要傳遞該值，此時應該將它的屬性設置爲readonly 。
• 常常遇到當用戶正式提交了表單後須要等待管理員的信息驗證，這就不容許用戶再更改表單中的數據，而是隻可以查看，因爲disabled的做用元素範圍大，因此此時應該使用disabled，但同時應該注意的是要將submit button也disabled掉，不然只要用戶按了這個按鈕，若是在數據庫操做頁面中沒有作完整性檢測的話，數據庫中的值就會被清除。若是說在這種狀況下用readonly來代替disabled的話，若表單中只有input(text / password)和textarea元素，那仍是能夠的，若是存在其餘元素，好比select，用戶能夠在從新改寫值後按回車鍵進行提交(回車是默認的submit觸發按鍵) 。
• 咱們經常在用戶按了提交按鈕後，利用javascript將提交按鈕disabled掉，這樣能夠防止網絡條件比較差的環境下，用戶反覆點提交按鈕致使數據冗餘地存入數據庫。

好了，終於down完了，附上大佬連接：https://www.cnblogs.com/luoguixin/p/6593993.html