Como desativar um tipo de entrada = texto?

Desejo desativar a gravação em um campo de entrada do tipo textusando JavaScript, se possível. O campo de entrada é preenchido a partir de um banco de dados; é por isso que não quero que o usuário modifique seu valor.

Se você souber disso quando a página for renderizada, o que parece ser porque o banco de dados tem um valor, é melhor desativá-lo quando renderizado, em vez de JavaScript. Para fazer isso, basta adicionar oreadonly atributo (ou disabled, se você quiser removê-lo também do envio do formulário) ao <input>, da seguinte maneira:

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

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

ou

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

Observe que readOnly deve estar no camelCase para funcionar corretamente no Firefox (mágico).

Demo: https://jsfiddle.net/L96svw3c/ - explica um pouco a diferença entre disablede readOnly.

Se os dados forem preenchidos no banco de dados, você pode considerar não usar uma <input>tag para exibi-los. No entanto, você pode desativá-lo diretamente na tag:

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

Se você precisar desativá-lo com Javascript posteriormente, poderá definir o atributo "desativado":

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

A razão pela qual sugiro não mostrar o valor como um <input>é que, na minha experiência, ele causa problemas de layout. Se o texto for longo, em um <input>usuário o usuário precisará tentar rolar o texto, o que não é algo que as pessoas normais acham que devem fazer. Se você simplesmente soltá-lo em <span>algo ou algo, você tem mais flexibilidade de estilo.

Você também pode, por jquery:

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

Exemplo de trabalho:

$('#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" />

Obtenha uma referência à sua caixa de entrada da maneira que desejar (por exemplo document.getElementById('mytextbox')) e configure sua readonlypropriedade para true:

myInputBox.readonly = true;

Como alternativa, você pode simplesmente adicionar essa propriedade em linha (não é necessário JavaScript):

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