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




checker test (5)

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.


Answers

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.


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

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".


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.

Esto presenta un poco de un problema de usabilidad.

Si desea mostrar una casilla de verificación, pero no permitir que se interactúe con ella, ¿por qué incluso una casilla de verificación?

Sin embargo, mi enfoque sería utilizar deshabilitado (el usuario espera que una casilla de verificación deshabilitada no sea editable, en lugar de usar JS para que una habilitada no funcione), y agregar un controlador de envío de formulario usando javascript que habilite las casillas de verificación justo antes de que se complete el formulario. presentado. De esta manera usted obtiene sus valores publicados.

es decir, algo como esto:

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}




html cross-browser section508