Cómo deshabilitar un tipo de entrada = texto?

Question

Quiero desactivar la escritura en un campo de entrada de tipo text usando JavaScript, si es posible. El campo de entrada se llena desde una base de datos; es por eso que no quiero que el usuario modifique su valor.

Answer 1

Si sabe esto cuando se procesa la página, lo que parece que hace porque la base de datos tiene un valor, es mejor desactivarla cuando se represente en lugar de JavaScript. Para ello, sólo tiene que añadir el atributo readonly (o disabled, si quieres eliminarlo de la sumisión de la forma también) a la <input>, así:

<input type="text" disabled="disabled" /> 
//or... 
<input type="text" readonly="readonly" /> 

Answer 2

obtener una referencia a su buzón de entrada de tu gusto (por ejemplo document.getElementById('mytextbox')) y establecer la readonly propiedad a true:

myInputBox.readonly = true; 

Como alternativa, simplemente puede añadir esta línea de propiedad (sin JavaScript necesario):

<input type="text" value="from db" readonly="readonly" /> 

Answer 3

Si los datos se rellena a partir de la base de datos, podría considerar no usando una etiqueta <input> para mostrarla. Sin embargo, puede desactivar las cosas bien en la etiqueta:

<input type='text' value='${magic.database.value}' disabled> 

Si tiene que desactivar con Javascript después, se puede establecer el atributo "desactivado":

document.getElementById('theInput').disabled = true; 

La razón por la que no sugiero que muestran el valor como <input> es que, en mi experiencia, causa problemas de diseño. Si el texto es largo, entonces en un <input>, el usuario tendrá que intentar desplazar el texto, lo cual no es algo normal que la gente pueda adivinar. Si lo dejas caer en <span> o algo así, tienes más flexibilidad de estilo.

Answer 4

document.getElementById('foo').disabled = true; 

EDITAR

o

document.getElementById('foo').readOnly = true; 

Tenga en cuenta que debe haber readOnly en CamelCase para trabajar correctamente en Firefox (magia).

Answer 5

También puede por jQuery:

$('#foo').disabled = true;