314
我已經閱讀了一些，但我似乎無法找到任何關於不同瀏覽器如何處理事情的可靠信息。我構建的應用必須符合Section 508（屏幕閱讀器可訪問）並且可以清除回IE 6。對於HTML表單輸入字段，disabled =「disabled」和readonly =「readonly」有什麼區別？
A
回答
534
A readonly元素只是不可編輯的，但在根據form提交時發送。 disabled元素不可編輯，並且在提交時不會發送。另一個區別是，readonly元素可以被聚焦（並且在通過表單「掛鉤」時變得更加集中），而disabled元素不能。
瞭解更多關於這this great article或the definition by w3c。引述重要的部分：
主要差異
disabled屬性
- 值供殘疾人使用的形式的元素並不傳遞到處理器的方法。在W3C稱這種成功的元素。（這個工作原理類似於未籤 形式複選框。）
- 一些瀏覽器可以覆蓋或提供禁用的表單元素的默認樣式。 （灰色或浮雕文字）Internet Explorer 5.5對此特別討厭。
- 禁用的表單元素不接收焦點。
- 殘疾人表單元素被跳過在跳格導航。
只讀屬性
- 並非所有的表單元素有一個只讀屬性。最值得一提的
<SELECT>，<OPTION>和<BUTTON>元素沒有隻讀屬性 （雖然你都有殘疾屬性）- 瀏覽器沒有提供默認覆蓋視覺反饋表單元素是隻讀的。 （這可能是一個問題......請看下文。）
- 與只讀屬性設置表單元素將會得到傳遞給表單處理。
- 只讀形式元素可以接收焦點
- 只讀形成元件包括在標籤式導航。
+4
只讀元素上不能使用CTRL + C，但你可以用鼠標右鍵單擊並選擇複製。 – Rumplin
+6
@Rumplin你確定嗎？我剛剛測試過，並且能夠在OS X上的Chrome中使用鍵盤快捷鍵進行復制。 – evanrmurphy
+5
「並非所有表單元素都具有隻讀屬性。最值得注意的是，
29
Disabled表示在提交表單時沒有提交表單元素的任何數據。只讀表示元素中的所有數據都將被提交，但用戶不能更改。
例如：
<input type="text" name="yourname" value="Bob" readonly="readonly" />
這將提交值 「鮑勃」 爲元件 「提供yourname」。
<input type="text" name="yourname" value="Bob" disabled="disabled" />
這將不提交元素「yourname」。
3
同其他答案（禁用不發送到服務器，只讀IS），但某些瀏覽器限制禁用形式的突出，而只讀仍然可以突出顯示（和複製）。
http://www.w3schools.com/tags/att_input_disabled.asp
http://www.w3schools.com/tags/att_input_readonly.asp
只讀字段不能被修改。但是，用戶可以選中它，突出顯示它，並從中複製文本。當元素是具有禁用屬性
+9
*旁註：*您相信w3schools？哎呀。閱讀http://www.w3fools.com/ – Raptor
+0
@Raptor w3schools不再皺眉。來自w3fools.com：_W3Schools仍然存在問題，但他們至少在開發者所關心的主要問題上工作過。對於許多初學者來說，W3Schools有結構化的教程和遊樂場，提供了不錯的學習體驗._ –
76
沒有事件被觸發。的
無下文將得到觸發。
$("[disabled]").click(function(){ console.log("clicked") });//No Impact
$("[disabled]").hover(function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick(function(){ console.log("double clicked") });//No Impact
雖然readonly會被觸發。
$("[readonly]").click(function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover(function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick(function(){ console.log("double clicked") });//log - double clicked
+4
極好的補充！ – Andy
8
元素與殘疾人屬性不會提交或者可以說他們的價值觀就不會貼有要求。
即
<input type="textbox" name="field" value="field" disabled="disabled" />
差分
- 殘疾人控件不接收焦點。
- 禁用的控件在標籤導航中跳過。
- 禁用的控件無法成功發佈。
如果您想發佈您的字段數據，請使用只讀屬性。
即
<input type="textbox" name="field" value="field" readonly="readonly" />
- 只讀元素接收焦點，但不能被用戶修改。
- 只讀元素包含在Tab鍵導航中。
- 只讀元素已成功發佈。
相關問題
- 1. GWT CellTable Cells readOnly/disabled/non-editable
- 2. ASP.NET中ReadOnly = true和TextBox1.Attributes.Add（「readonly」，「readonly」）有什麼區別？
- 3. ReadOnly或Disabled-Grayed Task複選框？
- 4. DataGridViewCheckBoxCell類型DataGridView列是不斷readonly/disabled
- 5. HTML複選框單擊（）返回FALSE或TRUE而不是READONLY或DISABLED使用jQuery
- 6. .net中的readonly屬性和函數有什麼區別？
- 7. 沒有setter的readonly和prop有什麼區別？
- 8. 輸入[disabled = true]和jQuery
- 9. NoSetter和ReadOnly有什麼不同？
- 10. ReadOnly和Enabled之間的主要區別是什麼？
- 11. 爲什麼Disabled = ture for html work？
- 12. 在禁用的TextBoxFor中，readonly是什麼？
- 13. 爲什麼GetAttribute（「disabled」）返回「true」而不是「disabled」？
- 14. meteor/react - 「readOnly」屬性有什麼作用？
- 15. 使用@Transactional（readOnly = true）有什麼好處？
- 16. AngularJs-ng-disabled
- 17. 基於一個值對一組輸入使用ng-disabled
- 18. Angular UI Bootstrap datepicker：ng-readonly支持
- 19. disabled =「disabled」不適用於定位按鈕：jQuery mobile
- 20. Readonly PropertyGrid
- 21. AngularJS：ng-disabled是否刪除輸入值？
- 22. jQuery .prop（「disabled」，false）未啓用輸入
- 23. 輸入：懸停和輸入之間有什麼區別：對於文本字段有效？
- 24. 在IE中定製disabled =「disabled」樣式
- 25. 使用ng-disabled與輸入select2
- 26. openWYSIWYG disabled textarea
- 27. 在vb.net中使用顯式獲取語句的一行ReadOnly屬性和ReadOnly之間的區別
- 28. android radiobutton disabled
- 29. 我錯過了關於jquery，aria-disabled和disabled選擇器的內容？
- 30. Rails 3 - will_paginate隱藏類「next_page disabled」和「previous_page disabled」
安迪：你提到的textarea的，但我們不能一概而論你的問題的所有HTML表單輸入字段？ @oezi的（v好）答案似乎是這樣做的。如果您沒有問題，我會更新您的問題。 –
相關：「如何模擬select標籤的readonly屬性，並仍然獲取POST數據？」 http://stackoverflow.com/questions/368813/html-form-readonly-select-tag-input –