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

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.

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.

Ż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

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ę”.

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.

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"