Jaka jest różnica między disabled= "disabled" i readonly = "readonly" dla pól wprowadzania formularzy HTML?

Czytałem trochę na ten temat, ale nie mogę znaleźć nic solidnego o tym, jak różne przeglądarki traktują rzeczy.

Author: Mark Amery, 2011-10-11

5 answers

A readonly element nie jest po prostu edytowalny, ale jest wysyłany, gdy zgodnie form przesyła. Element disabled nie jest edytowalny i nie jest wysyłany przy wysyłaniu. Inną różnicą jest to, że elementy readonly mogą być skupione (i być skupione podczas "zakładkowania" przez formularz), podczas gdy elementy disabled nie mogą.

Czytaj więcej na ten temat w ten świetny artykuł lub definicja w3c. Cytuję ważną część:

Kluczowe Różnice

Na Atrybut wyłączony

  • wartości dla wyłączonych elementów formularza nie są przekazywane do metody procesora. W3C nazywa ten element sukcesem.(Działa to podobnie do pola wyboru formularza, które nie są zaznaczone.)
  • niektóre przeglądarki mogą nadpisać lub zapewnić domyślną stylizację dla wyłączonych elementów formularza. (Szary lub wytłoczony tekst) Internet Explorer 5.5 jest szczególnie nieprzyjemny w tym względzie.
  • wyłączone Elementy formularza nie otrzymują Fokusa.
  • formularz wyłączony elementy są pomijane w nawigacji tabulacji.

Atrybut Tylko Do Odczytu

  • nie wszystkie elementy formularza mają atrybut readonly. Najbardziej znane, the <SELECT> , <OPTION> , i <BUTTON> elementy nie mają readonly atrybuty (chociaż oba mają wyłączone atrybuty)
  • przeglądarki nie zapewniają domyślnego nadpisanego wizualnego sprzężenia zwrotnego, że element formularza jest tylko do odczytu. (Może to być problem... patrz poniżej.)
  • Form elements with the readonly zestaw atrybutów zostanie przekazany do procesora formularzy.
  • tylko do odczytu Elementy formularza mogą otrzymać fokus
  • Elementy formularza Tylko do odczytu są zawarte w nawigacji z kartami.
 764
Author: oezi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-14 21:41:14

Ż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

While readonly zostanie uruchomione.

$("[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
 94
Author: Hrishabh Gupta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-14 04:59:21

Wyłączone oznacza, że żadne dane z tego elementu formularza nie będą przesyłane podczas składania 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 przesłanie wartości " Bob "dla elementu"yourname".

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

To nie dostarczy niczego dla elementu "yourname".

 37
Author: Michael Irigoyen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-11 18:30:58

Tak samo jak inne odpowiedzi (wyłączone nie są wysyłane do serwera, tylko do odczytu), ale niektóre przeglądarki uniemożliwiają podświetlanie wyłączonego formularza, podczas gdy tylko do odczytu można nadal podświetlać (i kopiować).

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

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

Nie można modyfikować pola tylko do odczytu. Jednak użytkownik może zakładkę do niego, wyróżnić go i skopiować tekst z niego.

 5
Author: Tim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-11 18:33:14

Jeśli wartość wyłączonego pola tekstowego musi zostać zachowana po wyczyszczeniu formularza (reset), należy użyć disabled = "disabled", ponieważ pole tekstowe tylko do odczytu nie zachowa wartości

Na Przykład:

HTML

Textbox

<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ść tekstowa zostanie zachowana w formularzu. Wartość nie zostanie zachowana w przypadku input type = "text" readonly="readonly"

 2
Author: Syed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-24 05:57:36