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

Question

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

Answer 1

Элемент

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

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

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

Атрибут Disabled

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

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

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

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

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