В чем разница между disabled="disabled" и readonly="readonly" для полей ввода формы HTML?

Question

Я немного читал об этом, но я не могу найти что-то твердое о том, как разные браузеры относятся к вещам. Я создаю приложение, которое должно быть совместимым с Разделом 508 (доступным для чтения с экрана) и работать обратно в IE 6.

Answer 1

readonly элемент просто не редактируется, но отправляется, когда form представляет. disabled элемент не редактируется и не отправляется при отправке. Другое отличие состоит в том, что readonly элементы могут быть сфокусированы (и фокусироваться при "табулировании" через форму) во время disabled элементы не могут.

Подробнее об этом читайте в этой замечательной статье или в определении от w3c. Чтобы процитировать важную часть:

Ключевые отличия

Атрибут Disabled

• Значения для отключенных элементов формы не передаются в процессорный метод. W3C называет это успешным элементом (это работает аналогично флажкам формы, которые не отмечены).
• Некоторые браузеры могут переопределять или предоставлять стиль по умолчанию для отключенных элементов формы.(Затенение или тиснение текста) Internet Explorer 5.5 особенно противен этому.
• Отключенные элементы формы не получают фокус.
• Отключенные элементы формы пропускаются при навигации по вкладкам.

Атрибут Только для чтения

• Не все элементы формы имеют атрибут readonly. Наиболее заметным <SELECT>, <OPTION>, а также <BUTTON> элементы не имеют атрибутов только для чтения (хотя оба они имеют отключенные атрибуты)
• Браузеры не предоставляют переопределенной визуальной обратной связи по умолчанию, что элемент формы доступен только для чтения.(Это может быть проблемой... см. Ниже.)
• Элементы формы с установленным атрибутом readonly будут переданы в процессор форм.
• Элементы только для чтения могут получить фокус
• Элементы навигации только для чтения включены в навигацию с вкладками.

Answer 2

Никакие события не инициируются, когда элемент имеет отключенный атрибут.

Ничто из нижеприведенного не будет запущено.

$("[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]").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

Answer 3

Отключено означает, что данные из этого элемента формы не будут отправлены при отправке формы. Только для чтения означает, что любые данные внутри элемента будут отправлены, но они не могут быть изменены пользователем.

Например:

<input type="text" name="yourname" value="Bob" readonly="readonly" />

Это передаст значение "Bob" для элемента "ваше имя".

<input type="text" name="yourname" value="Bob" disabled="disabled" />

Это ничего не передаст для элемента "ваше имя".

Answer 4

Элементы с атрибутом Disabled не будут отправлены или могут сказать, что их значения не будут опубликованы с запросом.

т.е.

<input type="textbox" name="field" value="field" disabled="disabled" />

разница

• Отключенные элементы управления не получают фокус.
• Отключенные элементы управления пропускаются во вкладках навигации.
• Отключенные элементы управления не могут быть успешно опубликованы.

Используйте атрибут readonly, если вы хотите опубликовать данные своего поля.

т.е.

<input type="textbox" name="field" value="field" readonly="readonly" />

• Элементы только для чтения получают фокус, но не могут быть изменены пользователем.
• Элементы только для чтения включены в навигацию по вкладкам.
• Элементы только для чтения успешно опубликованы.

Answer 5

То же самое, что и другие ответы (отключено, не отправляется на сервер, доступно только для чтения), но некоторые браузеры предотвращают выделение отключенной формы, в то время как доступ только для чтения может быть выделен (и скопирован).

http://www.w3schools.com/tags/att_input_disabled.asp

http://www.w3schools.com/tags/att_input_readonly.asp

Поле только для чтения не может быть изменено. Тем не менее, пользователь может перейти к нему, выделить его и скопировать текст из него.

Answer 6

Если значение отключенного текстового поля необходимо сохранить при очистке (сбросе) формы, disabled = "disabled" необходимо использовать, поскольку текстовое поле только для чтения не сохранит значение

Например:

HTML

Текстовое окно

<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />

Кнопка сброса

<button type="reset" id="clearButton">Clear</button>

В приведенном выше примере, когда нажата кнопка "Очистить", отключенное текстовое значение будет сохранено в форме. Стоимость не сохраняется в случаеinput type = "text" readonly="readonly"

Answer 7

Разница между отключенными и только для чтения заключается в том, что элементы управления только для чтения могут по-прежнему функционировать и по-прежнему доступны для фокуса, а отключенные элементы управления не могут получать фокус и не отправляются вместе с формой.

Answer 8

По сути, атрибут «только для чтения» означает, что элемент не может редактироваться пользователем, но отправляется вместе с формой. Однако отключенный атрибут означает, что элемент не может редактироваться пользователем и не будет отправлен вместе с формой. (PS Отключенные элементы также имеют меньшую непрозрачность)

Answer 9

Атрибут readonly может быть установлен, чтобы запретить пользователю изменять значение до тех пор, пока не будут выполнены некоторые другие условия, в то время как атрибут disabled может быть установлен, чтобы запретить пользователю использовать элемент.