Qual è la differenza tra disabled = "disabled" e readonly = "readonly" per i campi di input del modulo HTML?

Question

Ho letto un po 'su questo, ma non riesco a trovare nulla di solido su come i diversi browser trattano le cose. Sto costruendo un'app che deve essere conforme alla Sezione 508 (accessibile dallo screen reader) e tornare a IE 6.

Answer 1

Un elemento readonly non è modificabile, ma viene inviato quando il secondo form invia. un elemento disabled non è modificabile e non viene inviato su invio. Un'altra differenza è che gli elementi readonly possono essere focalizzati (e focalizzati quando si "tabulazione" attraverso un modulo) mentre gli elementi disabled non possono.

Per ulteriori informazioni, consultare this great article o the definition by w3c. Per citare la parte importante:

Le differenze principali

L'attributo disabili

• Valori per disabili elementi del modulo non sono passati al metodo del processore. Il W3C chiama questo elemento di successo (funziona in modo simile alle caselle di controllo del modulo non selezionate.)
• Alcuni browser possono eseguire l'override o fornire uno stile predefinito per gli elementi del modulo disabilitati. (Grigio fuori o rilievo del testo) Internet Explorer 5.5 è particolarmente antipatico a riguardo.
• Gli elementi del modulo disabilitati non ricevono lo stato attivo.
• Gli elementi del modulo disabilitati vengono saltati in navigazione con linguette.

l'attributo Sola lettura

• Non tutti gli elementi del modulo hanno un attributo di sola lettura. Degna di nota, le <SELECT>, <OPTION>, e <BUTTON> elementi non hanno attributi di sola lettura (anche se entrambi hanno la tua attributi disabili)
• browser forniscono alcun valore predefinito sovrascritto feedback visivo che l'elemento del modulo è di sola lettura. (Questo può essere un problema ... vedi sotto).
• elementi modulo con il set di attributi di sola lettura avranno passato al processore modulo.
• Leggi solo gli elementi del modulo possono ricevere lo stato attivo
• Leggi solo gli elementi del modulo sono inclusi nella navigazione a schede.

Answer 2

disabili significa che nessun dato di elemento che forma verranno sottoposti quando il modulo viene inviato. Sola lettura significa che verranno inviati tutti i dati dall'elemento, ma non possono essere modificati dall'utente.

Ad esempio:

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

Questo presenterà il valore di "Bob" per l'elemento "tuonome".

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

Questo non invierà nulla per l'elemento "tuo nome".

Answer 3

Uguale alle altre risposte (disabilitato non viene inviato al server, solo in lettura) ma alcuni browser impediscono l'evidenziazione di un modulo disabilitato, mentre la sola lettura può ancora essere evidenziata (e copiata).

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

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

Un campo di sola lettura non può essere modificato. Tuttavia, un utente può selezionarlo, evidenziarlo e copiarne il testo.

Answer 4

Nessun evento viene attivato quando l'elemento ha un attributo disabilitato.

Nessuno dei seguenti verrà attivato.

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

Durante la lettura verrà attivato.

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

Gli elementi con attributo Disattivato non vengono inviati o possono dire che i loro valori non verranno pubblicati con richiesta.

cioè

<input type="textbox" name="field" value="field" disabled="disabled" /> 

Differenza

• controlli disabili non ricevono attenzione.
• I controlli disabilitati vengono saltati in navigazione con linguette.
• I controlli disabilitati non possono essere inviati correttamente.

Utilizzare l'attributo readonly nel caso in cui si desidera pubblicare i dati del campo.

cioè

<input type="textbox" name="field" value="field" readonly="readonly" /> 

• sola lettura elementi ricevono lo stato attivo ma non possono essere modificati dall'utente.
• Gli elementi di sola lettura sono inclusi nella navigazione con linguette.
• Gli elementi di sola lettura vengono inviati correttamente.