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

web accessibility checker chrome

Question

He leído un poco sobre esto, pero parece que no puedo encontrar nada sólido acerca de cómo los diferentes navegadores tratan las cosas. Estoy creando una aplicación que tiene que ser compatible con la Sección 508 (se puede acceder al lector de pantalla) y volver a IE 6.

Answer 1

Desactivado significa que no se enviarán datos de ese elemento de formulario cuando se envíe el formulario. Solo lectura significa que se enviarán todos los datos del elemento, pero el usuario no puede modificarlos.

Por ejemplo:

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

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

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

Esto no enviará nada para el elemento "tu nombre".

Answer 2

Igual que las otras respuestas (deshabilitado no se envía al servidor, solo lectura), pero algunos navegadores impiden el resaltado de un formulario deshabilitado, mientras que solo lectura puede resaltarse (y copiarse).

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

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

Un campo de solo lectura no puede ser modificado. Sin embargo, un usuario puede tabularlo, resaltarlo y copiar el texto.

Answer 3

Los elementos con el atributo Deshabilitado no se enviaron o pueden decir que sus valores no se publicarán con la solicitud.

es decir

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

Diferencia

• Los controles desactivados no reciben el foco.
• Los controles deshabilitados se omiten en la navegación de tabulación.
• Los controles deshabilitados no se pueden publicar correctamente.

Use el atributo de solo lectura en caso de que quiera publicar los datos de su campo.

es decir

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

• Los elementos de solo lectura reciben el foco pero no pueden ser modificados por el usuario.
• Los elementos de solo lectura están incluidos en la navegación de tabulación.
• Los elementos de solo lectura se publican correctamente.

Answer 4

No se activan eventos 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 leerá solo se activará.

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

Un elemento de solo readonly no es editable, pero se envía cuando se envía el form . un elemento disabled no es editable y no se envía al enviar. Otra diferencia es que los elementos de readonly pueden enfocarse (y enfocarse al "tabular" a través de un formulario) mientras que disabled elementos disabled no pueden.

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 Disabled

• Los valores para 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 de formulario que no están marcadas).
• Algunos navegadores pueden anular o proporcionar un estilo predeterminado para los elementos de formulario deshabilitados. (Gris o en relieve el texto) Internet Explorer 5.5 es particularmente desagradable al respecto.
• Los elementos de formulario deshabilitados no reciben el foco.
• Los elementos de formulario deshabilitados se omiten en la navegación de tabulación.

El atributo de solo lectura

• No todos los elementos de formulario tienen un atributo de solo lectura. Lo más notable, los elementos <SELECT> , <OPTION> y <BUTTON> no tienen atributos de solo lectura (aunque ambos tienen atributos deshabilitados)
• Los navegadores no proporcionan comentarios visuales anulados predeterminados de que el elemento del formulario es de solo lectura. (Esto puede ser un problema ... ver más abajo.)
• Los elementos de formulario con el conjunto de atributos de solo lectura se pasarán al procesador de formularios.
• Los elementos de solo lectura pueden recibir el foco.
• Los elementos de solo lectura están incluidos en la navegación con pestañas.