Comment désactiver un type d'entrée = texte?

Je souhaite désactiver l'écriture dans un champ de saisie de type à l' textaide de JavaScript, si possible. Le champ d'entrée est rempli à partir d'une base de données; c'est pourquoi je ne veux pas que l'utilisateur modifie sa valeur.

Si vous savez cela lorsque la page est rendue, ce qui semble être le cas car la base de données a une valeur, il est préférable de la désactiver lors du rendu au lieu de JavaScript. Pour ce faire, ajoutez simplement l' readonlyattribut (ou disabled, si vous souhaitez également le supprimer de la soumission du formulaire) <input>, comme ceci:

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

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

ou

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

Notez que readOnlydevrait être dans camelCase pour fonctionner correctement dans Firefox (magie).

Démo: https://jsfiddle.net/L96svw3c/ - explique quelque peu la différence entre disabledet readOnly.

Si les données sont remplies à partir de la base de données, vous pouvez envisager de ne pas utiliser de <input>balise pour les afficher. Néanmoins, vous pouvez le désactiver directement dans le tag:

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

Si vous devez le désactiver ultérieurement avec Javascript, vous pouvez définir l'attribut "désactivé":

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

La raison pour laquelle je suggère de ne pas afficher la valeur en tant que <input>est que, d'après mon expérience, cela provoque des problèmes de mise en page. Si le texte est long, <input>l'utilisateur devra essayer de faire défiler le texte, ce qui n'est pas quelque chose que les gens normaux devineraient faire. Si vous le déposez simplement dans un <span>ou quelque chose, vous avez plus de flexibilité de style.

Vous pouvez également par jquery:

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

Exemple de travail:

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

Obtenez une référence à votre zone de saisie comme vous le souhaitez (par exemple document.getElementById('mytextbox')) et définissez sa readonlypropriété sur true:

myInputBox.readonly = true;

Vous pouvez également simplement ajouter cette propriété en ligne (aucun JavaScript n'est nécessaire):

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