論readonly與disabled在css中區(qū)別

之前在項(xiàng)目中遇到的一個(gè)問(wèn)題，現(xiàn)在想把它記錄下來(lái)。
當(dāng)項(xiàng)目需求上需要在文本框中禁用輸入某個(gè)值的時(shí)候，我第一個(gè)反應(yīng)是用了disabled，因?yàn)橹耙恢苯佑|的都是disabled。但當(dāng)我需要提交FROM表單的時(shí)候，發(fā)現(xiàn)文本框的值根本不能提交過(guò)去，這個(gè)時(shí)候我就覺(jué)得很奇怪了，為什么使用disabled這個(gè)屬性的值不會(huì)提交呢？后來(lái)經(jīng)過(guò)詢問(wèn)與了解，便知道，還有另外一個(gè)在文本框，文本域中顯示只讀模式的屬性元素readonly。
如圖使示：

disabled屬性在網(wǎng)頁(yè)中顯示出來(lái)是這個(gè)效果：

readonly屬性在網(wǎng)頁(yè)中顯示出來(lái)則是這個(gè)效果：

個(gè)人認(rèn)為在樣式上disabled屬性比readonly屬性更為可觀，但你需要后臺(tái)獲取值的時(shí)候，readonly屬性就可以發(fā)揮它的作用，這是在功能上比disabled更勝一籌的。如果設(shè)置了disabled屬性，在后臺(tái)是獲取不到登錄名的值的。但你不需要傳值的時(shí)候，disabled屬性就比readonly屬性的范圍更廣，但readonly屬性只對(duì)< input >和< textarea> 標(biāo)簽有效，disabled屬性< textarea>,< input>,< label>,< option>,< select> ，< button>, 等等標(biāo)簽都有效，沒(méi)有readonly屬性局限的多。
使用disabled即使在頁(yè)面上不能改變值，但還有一種方法，即是通過(guò)JavaScript，可以通過(guò)給value賦值來(lái)改變值。
disabled與readonly雖然都能夠做到在輸入框中不能更改內(nèi)容，但還是有基本的區(qū)別的，如果需要讓值進(jìn)行提交還是要用readonly屬性，這個(gè)需要看個(gè)人項(xiàng)目需求。

總結(jié)

以上是生活随笔為你收集整理的readonly与disabled属性在css中区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。