定義

readonly和disabled是用在表單中的兩個(gè)屬性，它們都能夠做到使用戶不能夠更改表單域中的內(nèi)容

區(qū)別

readonly只針對(duì)input(text / password)和textarea有效，而disabled對(duì)于所有的表單元素都有效，包括select, radio, checkbox, button等

但是表單元素在使用了disabled后，當(dāng)我們將表單以POST或GET的方式提交的話，這個(gè)元素的值不會(huì)被傳遞出去，而readonly會(huì)將該值傳遞出去（這種情況出現(xiàn)在我們將某個(gè)表單中的textarea元素設(shè)置為disabled或readonly，但是submit button卻是可以使用的）

使用情況

1、在某個(gè)表單中為用戶預(yù)填了某個(gè)唯一識(shí)別代碼，不允許用戶改動(dòng)，但是在提交時(shí)需要傳遞該值，此時(shí)應(yīng)該將它的屬性設(shè)置為readonly

2、提交表單，等待驗(yàn)證，禁止修改數(shù)據(jù)，因?yàn)橛懈鞣N表單，disabled比較合適，但是同時(shí)submit button也disabled掉，否則用戶點(diǎn)擊之后會(huì)清除數(shù)據(jù)。

3、我們常常在用戶按了提交按鈕后，利用javascript將提交按鈕disabled掉，這樣可以防止網(wǎng)絡(luò)條件比較差的環(huán)境下，用戶反復(fù)點(diǎn)提交按鈕導(dǎo)致數(shù)據(jù)冗余地存入數(shù)據(jù)庫(kù)

區(qū)別

1、如果一個(gè)輸入項(xiàng)的disabled設(shè)為true，則該表單輸入項(xiàng)不能獲取焦點(diǎn)，用戶的所有操作（鼠標(biāo)點(diǎn)擊和鍵盤輸入等）對(duì)該輸入項(xiàng)都無(wú)效，最重要的一點(diǎn)是當(dāng)提交表單時(shí)，這個(gè)表單輸入項(xiàng)將不會(huì)被提交

2、而readonly只是針對(duì)文本輸入框這類可以輸入文本的輸入項(xiàng)，如果設(shè)為true，用戶只是不能編輯對(duì)應(yīng)的文本，但是仍然可以聚焦焦點(diǎn)，并且在提交表單的時(shí)候，該輸入項(xiàng)會(huì)作為form的一項(xiàng)提交

3.readonly是要鎖定這個(gè)控件，通過(guò)在界面上無(wú)法修改他（但是通過(guò)javascript可以修改他）

4、disabled和readonly有相同的地方也是可以鎖定這個(gè)控件用戶不能改變他的值，但是disabled的更徹底一些，他是要使你完全不能使用他，包括改變他的背景顏色

5、所有控件都有disabled 屬性，但是不一定有readonly屬性，如select 下拉框。點(diǎn)擊被readonly掉的按鈕照樣可以觸發(fā)事件，但是被disabled掉的按鈕就無(wú)法使用了不管上面有沒(méi)有事件。

6、將div設(shè)置disabled屬性之后，整個(gè)div都灰掉了，但是文本框里面還是可以輸入內(nèi)容的。注意：select下拉選擇框是沒(méi)有readonly屬性的

注意

設(shè)置為disabled的input將會(huì)有下面的限制：
1、不能接收焦點(diǎn)
2、使用tab鍵時(shí)將被跳過(guò)
3、可能不是successful的

設(shè)置為readonly的input將會(huì)有下面的限制：
1、可以接收焦點(diǎn)但不能被修改
2、可以使用tab鍵進(jìn)行導(dǎo)航
3、可能是successful的

只有successful的表單元素才是有效數(shù)據(jù)，也即是可以進(jìn)行提交。disabled和readonly的文本輸入框只能通過(guò)腳本進(jìn)行修改value屬性。

本文轉(zhuǎn)自http://www.nowamagic.net/html/html_ReadonlyAndDisabled.php，侵刪