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


Risposte:


729

Un readonlyelemento non è modificabile, ma viene inviato quando viene inviato il corrispondente form. Un disabledelemento non è modificabile e non viene inviato al momento dell'invio. Un'altra differenza è che gli readonlyelementi possono essere focalizzati (e focalizzati quando si "tabula" attraverso un modulo) mentre gli disabledelementi non possono.

Maggiori informazioni su questo in questo fantastico articolo o nella definizione di w3c . Per citare la parte importante:

Differenze chiave

L'attributo Disabled

  • I valori per gli elementi del modulo disabilitati non vengono passati al metodo del processore. Il W3C lo definisce un elemento di successo (funziona in modo simile alle caselle di controllo dei moduli che non sono selezionate).
  • Alcuni browser possono sostituire o fornire uno stile predefinito per gli elementi del modulo disabilitati. (Testo in grigio o in rilievo) Internet Explorer 5.5 è particolarmente sgradevole al riguardo.
  • Gli elementi del modulo disabilitati non ricevono lo stato attivo.
  • Gli elementi del modulo disabilitati vengono ignorati nella navigazione delle schede.

L'attributo di sola lettura

  • Non tutti gli elementi del modulo hanno un attributo di sola lettura. Gli elementi più importanti, the <SELECT>, <OPTION>e <BUTTON>non hanno attributi di sola lettura (sebbene entrambi abbiano attributi disabilitati)
  • I browser non forniscono alcun feedback visivo ignorato predefinito che l'elemento del modulo è di sola lettura. (Questo può essere un problema ... vedi sotto.)
  • Gli elementi del modulo con l'attributo readonly impostato verranno passati al processore del modulo.
  • Gli elementi modulo di sola lettura possono ricevere lo stato attivo
  • Gli elementi del modulo di sola lettura sono inclusi nella navigazione a schede.

5
sull'elemento readonly non puoi usare CTRL + C ma puoi usare il tasto destro del mouse e selezionare Copia.
Rumplin,

7
@Rumplin ne sei sicuro? Ho appena provato e sono stato in grado di copiare con la scorciatoia da tastiera in Chrome su OS X.
evanrmurphy

5
"Non tutti gli elementi del modulo hanno un attributo di sola lettura. In particolare, gli elementi <SELECT>, <OPTION> e <BUTTON> non hanno attributi di sola lettura (sebbene entrambi abbiano disabilitato gli attributi)". Ecco perché a volte è necessario utilizzare l'attributo "disabilitato" con un campo di input nascosto per selezionare i moduli.
Donato,

Nella versione corrente di Chrome gli elementi di sola lettura non possono ricevere lo stato attivo. Ciò è problematico se si prevede che gli utenti possano scorrere valori più lunghi della dimensione dell'input.
Mike Feltman,

5
Quindi è la mia comprensione che disabled implica readonly ma readonlynon implica disabled. In altre parole, se un elemento ha l' disabledattributo, non è necessario includere anche l' readonlyattributo. Corretta?
Chharvey,

91

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

Nessuna delle opzioni seguenti verrà attivata.

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

Mentre di sola 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

35

Disabilitato significa che non verranno inviati dati da quell'elemento del modulo quando il modulo viene inviato. Sola lettura significa che tutti i dati all'interno dell'elemento verranno inviati, ma non possono essere modificati dall'utente.

Per esempio:

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

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

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

Questo non invierà nulla per l'elemento "tuonome".


6
Entrambi readonlye disabledsono valori booleani. Usa disabledinvece di disabled="disabled"(stesso per sola lettura)
Raptor

5
Entrambi sono semanticamente corretti. HTML5 ti consente di utilizzare entrambi.
Michael Irigoyen,

3
L'ammonizione senza contesto di utilizzare solo i nomi degli attributi, senza valori, è sconsigliata, perché il codice non sarà quindi XML / XHTML valido. So che molti sviluppatori non si preoccupano di quelli, ma dovrebbero almeno essere consapevoli della trappola. Personalmente mi impegno per la conformità XHTML - a meno che non venga fornito un motivo convincente, che non ho ancora ricevuto - quindi utilizzo il modulo lungo / duplicato.
underscore_d

1
@ToolmakerSteve Hai una specifica citazione che le stringhe vuote sono XHTML valide? Posso solo trovare pagine di commenti che dicono che è valido per HTML5. Tutti quelli che ho visto parlare di XHTML dicono che deve essere la sua forma per gli attributi booleani attrname="attrname". Ad ogni modo, non sembra essere particolarmente ben documentato, almeno non quello che riesco a trovare. Bene, c'è questo - w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 - ma menziona specificamente SGML e HTML, non XHTML .... troppi acronimi: S
underscore_d

1
... ma saltando il bit per HTML, dove presenza / assenza è sufficiente - otteniamo questo, che presumibilmente si applica per omissione a XHTML: Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").quindi la stringa vuota non sembra essere valida.
underscore_d


1

Se il valore di una casella di testo disabilitata deve essere mantenuto quando un modulo viene cancellato (ripristinato), disabled = "disabled"deve essere utilizzato, poiché la casella di testo di sola lettura non manterrà il valore

Per esempio:

HTML

Casella di testo

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

Tasto reset

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

Nell'esempio sopra, quando si preme il pulsante Cancella, il valore del testo disabilitato verrà mantenuto nel modulo. Il valore non verrà mantenuto nel caso diinput type = "text" readonly="readonly"

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.