¿Cómo deshabilitar un tipo de entrada = texto?

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

Si sabe esto cuando se procesa la página, lo que suena como lo hace porque la base de datos tiene un valor, es mejor deshabilitarla cuando se procesa en lugar de JavaScript. Para hacer eso, simplemente agregue el readonlyatributo (o disabled, si también desea eliminarlo del envío del formulario), de la <input>siguiente manera:

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

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

o

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

Tenga en cuenta que readOnlydebe estar en camelCase para funcionar correctamente en Firefox (magia).

Demostración: https://jsfiddle.net/L96svw3c/ : explica un poco la diferencia entre disabledy readOnly.

Si los datos se rellenan desde la base de datos, puede considerar no usar una <input>etiqueta para mostrarlos. Sin embargo, puede deshabilitarlo directamente en la etiqueta:

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

Si necesita deshabilitarlo con Javascript más adelante, puede establecer el atributo "deshabilitado":

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

La razón por la que sugiero no mostrar el valor como <input>es es que, en mi experiencia, causa problemas de diseño. Si el texto es largo, entonces <input>el usuario deberá intentar desplazarse por el texto, lo cual no es algo que la gente normal suponga que haga. Si solo lo sueltas en un <span>o algo, tienes más flexibilidad de estilo.

También puedes por jquery:

$('#foo')[0].disabled = true;

Ejemplo de trabajo:

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

Obtenga una referencia a su cuadro de entrada como desee (por ejemplo document.getElementById('mytextbox')) y establezca su readonlypropiedad en true:

myInputBox.readonly = true;

Alternativamente, puede simplemente agregar esta propiedad en línea (no se necesita JavaScript):

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