¿Cuál es la diferencia entre deshabilitado="disabled" y readonly="readonly" para los campos de entrada de formulario HTML?

Resuelto Andy asked hace 12 años • 8 respuestas

He leído un poco sobre esto, pero parece que no puedo encontrar nada sólido sobre cómo los diferentes navegadores tratan las cosas.

Andy avatar Oct 12 '11 01:10 Andy
Aceptado

Un readonlyelemento simplemente no es editable, pero se envía cuando se formenvía el correspondiente. Un disabledelemento no es editable y no se envía al enviarlo. Otra diferencia es que readonlylos elementos se pueden enfocar (y enfocarse al "tabular" un formulario) mientras que disabledlos elementos no.

Lea más sobre esto en este gran artículo o en la definición de w3c . Para citar la parte importante:

Diferencias clave

El atributo deshabilitado

  • Los valores de los elementos de formulario deshabilitados no se pasan al método del procesador. El W3C llama a esto un elemento exitoso (esto funciona de manera similar a las casillas de verificación que no están marcadas).
  • Algunos navegadores pueden anular o proporcionar estilos predeterminados para elementos de formulario deshabilitados. (Texto atenuado o en relieve) Internet Explorer 5.5 es particularmente desagradable en este sentido.
  • Los elementos de formulario deshabilitados no reciben foco.
  • Los elementos de formulario deshabilitados se omiten en la navegación con pestañas.

El atributo de sólo lectura

  • No todos los elementos del formulario tienen un atributo de solo lectura. Lo más notable es que los elementos <SELECT>, <OPTION>y <BUTTON>no tienen atributos de solo lectura (aunque ambos tienen atributos deshabilitados)
  • Los navegadores no proporcionan información visual anulada predeterminada de que el elemento del formulario es de solo lectura. (Esto puede ser un problema... ver más abajo.)
  • Los elementos del formulario con el atributo de solo lectura establecido se pasarán al procesador de formularios.
  • Los elementos del formulario de solo lectura pueden recibir el foco
  • Los elementos del formulario de solo lectura se incluyen en la navegación con pestañas.
oezi avatar Oct 11 '2011 18:10 oezi

No se activa ningún evento cuando el elemento tiene el atributo deshabilitado.

Ninguno de los siguientes se activará.

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

Mientras que se activará el modo de solo lectura.

$("[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 avatar Sep 14 '2013 04:09 Hrishabh Gupta

Deshabilitado significa que no se enviarán datos de ese elemento del formulario cuando se envíe el formulario. Solo lectura significa que se enviará cualquier dato dentro del elemento, pero el usuario no podrá cambiarlo.

Por ejemplo:

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

Esto enviará el valor "Bob" para el elemento "tunombre".

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

Esto no enviará nada para el elemento "tunombre".

Michael Irigoyen avatar Oct 11 '2011 18:10 Michael Irigoyen

Igual que las otras respuestas (deshabilitado no se envía al servidor, solo lectura sí), pero algunos navegadores impiden resaltar un formulario deshabilitado, mientras que el de solo lectura aún se puede resaltar (y copiar).

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

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

Un campo de solo lectura no se puede modificar. Sin embargo, un usuario puede acceder a él, resaltarlo y copiar el texto.

Tim avatar Oct 11 '2011 18:10 Tim