Jaka jest różnica pomiędzy disabled = „disabled” i readonly = „readonly” dla pól wejściowych formularza HTML?

435

Przeczytałem trochę na ten temat, ale nie wydaje mi się, aby znaleźć solidne informacje na temat tego, jak różne przeglądarki traktują różne rzeczy.

Andy
źródło
powiązane: „jak emulować atrybut tylko do odczytu dla tagu select i nadal pobierać dane POST?” stackoverflow.com/questions/368813/…
Adrien Be

Odpowiedzi:

728

readonlyElementem jest po prostu nie można edytować, ale zostanie wysłana, gdy zgodnie formtwierdzi. disabledElement nie jest edytowalny i nie jest wysyłana na przedstawienia. Inną różnicą jest to, że readonlyelementy mogą być skupione (i skupione podczas „tabulacji” przez formularz), podczas gdy disabledelementy nie.

Przeczytaj więcej na ten temat w tym świetnym artykule lub w definicji w3c . Cytując ważną część:

Kluczowe różnice

Atrybut Wyłączone

  • Wartości wyłączonych elementów formularza nie są przekazywane do metody procesora. W3C nazywa to elementem udanym. (Działa to podobnie do pól wyboru formularza, które nie są zaznaczone).
  • Niektóre przeglądarki mogą zastąpić lub udostępnić domyślny styl dla wyłączonych elementów formularza. (Wyszarz lub wytłocz tekst) Internet Explorer 5.5 jest szczególnie nieprzyjemny z tego powodu.
  • Wyłączone elementy formularza nie są aktywowane.
  • Wyłączone elementy formularza są pomijane w nawigacji po kartach.

Atrybut tylko do odczytu

  • Nie wszystkie elementy formularza mają atrybut tylko do odczytu. Najważniejsze, że <SELECT>, <OPTION>i <BUTTON>elementy nie mają atrybutów tylko do odczytu (chociaż oba mają wyłączone atrybuty)
  • Przeglądarki nie dostarczają żadnej domyślnej przesłanianej informacji zwrotnej, że element formularza jest tylko do odczytu. (Może to być problem… patrz poniżej.)
  • Elementy formularza z ustawionym atrybutem tylko do odczytu zostaną przekazane do procesora formularza.
  • Fokus mogą otrzymać elementy tylko do odczytu
  • Elementy formularza tylko do odczytu są zawarte w nawigacji w kartach.
oezi
źródło
5
na elemencie tylko do odczytu nie można używać CTRL + C, ale można kliknąć prawym przyciskiem myszy i wybrać Kopiuj.
Rumplin
7
@Rumplin jesteś tego pewien? Właśnie przetestowałem i byłem w stanie skopiować za pomocą skrótu klawiaturowego w Chrome na OS X.
evanrmurphy
5
„Nie wszystkie elementy formularza mają atrybut tylko do odczytu. Najbardziej godne uwagi, elementy <SELECT>, <OPTION> i <BUTTON> nie mają atrybutów tylko do odczytu (chociaż oba mają wyłączone atrybuty)”. Dlatego czasami trzeba używać atrybutu „disabled” z ukrytym polem wejściowym dla wybranych formularzy.
Donato
W bieżącej wersji Chrome elementy tylko do odczytu nie mogą być aktywowane. Jest to problematyczne, jeśli oczekujesz, że użytkownicy będą mogli przewijać wartości dłuższe niż wielkość danych wejściowych.
Mike Feltman
5
Zatem moje rozumienie disabled sugeruje, readonly ale readonlynie sugeruje disabled. Innymi słowy, jeśli element ma disabledatrybut, wówczas nie ma potrzeby dołączania readonlyatrybutu. Poprawny?
chharvey
91

Żadne zdarzenia nie są wyzwalane, gdy element ma wyłączony atrybut.

Żadne z poniższych nie zostanie uruchomione.

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

Chociaż tylko do odczytu zostanie uruchomiony.

$("[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
Hrishabh Gupta
źródło
35

Wyłączone oznacza, że ​​żadne dane z tego elementu formularza nie zostaną przesłane podczas przesyłania formularza. Tylko do odczytu oznacza, że ​​wszelkie dane z elementu zostaną przesłane, ale użytkownik nie może ich zmienić.

Na przykład:

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

Spowoduje to przesłanie wartości „Bob” dla elementu „twoja nazwa”.

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

To nie prześle niczego dla elementu „twoje imię”.

Michael Irigoyen
źródło
6
Zarówno readonlyi disabledsą wartości logiczne. Użyj disabledzamiast disabled="disabled"(to samo tylko do odczytu)
Raptor
5
Oba są semantycznie poprawne. HTML5 pozwala na użycie jednego z nich.
Michael Irigoyen
3
Bezkontekstowe upomnienie o używaniu tylko nazw atrybutów, bez wartości, jest odradzane - ponieważ wtedy kod nie będzie prawidłowy XML / XHTML. Wiem, że wielu deweloperów nie przejmuje się nimi, ale powinni przynajmniej zdawać sobie sprawę z pułapki. Osobiście dążę do zgodności z XHTML - chyba że podano ważny powód, którego jeszcze nie otrzymałem - dlatego używam długiego / powielonego formularza.
underscore_d
1
@ToolmakerSteve Czy masz wzmiankę, że puste ciągi są poprawnymi XHTML? Mogę znaleźć tylko strony z komentarzami, które mówią, że jest on ważny dla HTML5. Wszyscy, których widziałem, mówiąc o XHTML, mówią, że musi to być forma atrybutów boolowskich attrname="attrname". Tak czy inaczej, wydaje się, że nie jest to szczególnie dobrze udokumentowane, przynajmniej nie mogę tego znaleźć. Cóż, jest to - w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 - ale wspomina tylko SGML i HTML, a nie XHTML .... zbyt wiele akronimów: S
underscore_d
1
... ale pomijam nieco HTML, gdzie obecność / nieobecność jest wystarczająca - otrzymujemy to, co prawdopodobnie dotyczy pominięcia XHTML: Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").Więc pusty ciąg nie wydaje się być poprawny.
underscore_d
4

To samo co inne odpowiedzi (wyłączone nie jest wysyłane na serwer, tylko do odczytu), ale niektóre przeglądarki zapobiegają podświetlaniu wyłączonego formularza, a tylko do odczytu można nadal wyróżnić (i skopiować).

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

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

Pola tylko do odczytu nie można modyfikować. Użytkownik może jednak przejść do niego tabulatorem, zaznaczyć go i skopiować z niego tekst.

Tim
źródło
1

Jeśli wartość wyłączonego pola tekstowego musi zostać zachowana, gdy formularz zostanie wyczyszczony (zresetowany), disabled = "disabled"należy użyć, ponieważ pole tekstowe tylko do odczytu nie zachowuje wartości

Na przykład:

HTML

Pole tekstowe

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

Przycisk reset

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

W powyższym przykładzie, po naciśnięciu przycisku Wyczyść, wyłączona wartość tekstu zostanie zachowana w formularzu. Wartość nie zostanie zachowana w przypadkuinput type = "text" readonly="readonly"

Syed
źródło