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


435

Я немного читал об этом, но я не могу найти что-то твердое о том, как разные браузеры относятся к вещам.


связанные: "как эмулировать атрибут readonly для тега select и все же получить данные POST?" stackoverflow.com/questions/368813/…
Adrien Be

Ответы:


729

readonlyЭлемент просто не редактируется, но отправляется , когда по formПРЕДСТАВЛЯЕТ. disabledЭлемент не редактируется и не отправляется на кнопку. Другое отличие состоит в том, что readonlyэлементы могут быть сфокусированы (и становятся сфокусированными при «табулировании» формы), а disabledэлементы - нет.

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

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

Атрибут Disabled

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

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

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

5
на элементе readonly вы не можете использовать CTRL + C, но вы можете использовать правую кнопку мыши и выбрать Copy.
Румплин

7
@Rumplin Ты уверен в этом? Я только что протестировал и смог скопировать с помощью сочетания клавиш в Chrome на OS X.
evanrmurphy

5
«Не все элементы формы имеют атрибут только для чтения. Наиболее заметные элементы <SELECT>, <OPTION> и <BUTTON> не имеют атрибутов только для чтения (хотя оба имеют отключенные атрибуты)». Вот почему иногда вы должны использовать атрибут «disabled» со скрытым полем ввода для выбора форм.
Донато

В текущей версии Chrome только для чтения элементы не могут получить фокус. Это проблематично, если вы ожидаете, что пользователи смогут прокручивать значения, которые длиннее, чем размер ввода.
Майк Фельтман,

5
Так что мое понимание disabled подразумевает, readonly но readonlyне подразумевает disabled. Другими словами, если элемент имеет disabledатрибут, нет необходимости также включать readonlyатрибут. Правильный?
Чарви

91

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

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

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

35

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

Например:

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

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

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

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


6
Оба readonlyи disabledявляются логическими значениями. Используйте disabledвместо disabled="disabled"(то же самое только для чтения)
Raptor

5
Оба семантически верны. HTML5 позволяет использовать либо.
Майкл Иригойен

3
Не требующее контекста указание использовать только имена атрибутов без значений, не рекомендуется, потому что тогда код не будет действительным XML / XHTML. Я знаю, что многие разработчики не заботятся об этом, но они должны по крайней мере знать о ловушке. Лично я стремлюсь к соблюдению XHTML - если только у меня нет веских причин, которых я еще не получил - поэтому я использую длинную / дублированную форму.
underscore_d

1
@ToolmakerSteve У вас есть предположение, что пустые строки являются допустимыми XHTML? Я могу найти только страницы с комментариями о том, что это действительно для HTML5. Все, кого я видел, говоря о XHTML, говорят, что его форма для логических атрибутов должна быть такой attrname="attrname". В любом случае, это не очень хорошо документировано, по крайней мере, я не могу найти. Ну, вот что - w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 - но в нем конкретно упоминаются только SGML и HTML, а не XHTML .... слишком много сокращений: S
underscore_d

1
... но пропуская бит для HTML, где присутствие / отсутствие достаточно - мы получаем это, которое предположительно применяется путем пропуска к XHTML: Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").Таким образом, пустая строка не является допустимой.
underscore_d

4

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

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

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

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


1

Если значение очищенного текстового поля необходимо сохранить при очистке формы (сброс), 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"

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.