web-dev-qa-db-fra.com

Comment rendre une entrée de texte non modifiable?

J'ai donc une saisie de texte

<input type="text" value="3" class="field left">

Voici mon CSS pour cela

background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px;

Y at-il un paramètre ou une astuce à cela, je pensais plutôt faire une étiquette mais que diriez-vous du style. Comment puis-je les convertir et existe-t-il un meilleur moyen ou est-ce le seul moyen?

htmlcsshtml-input
329
Matt Elhotiby
<input type="text" value="3" class="field left" readonly>

Aucun style nécessaire.

Voir <input> sur MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

676
BoltClock

Vous pouvez ajouter l'attribut readonly à l'entrée:

<input type="text" value="3"
       class="field left" readonly="readonly">

Plus d'infos: http://www.w3schools.com/tags/att_input_readonly.asp

66
Stephan Muller

Vous pouvez utiliser l'attribut readonly si vous souhaitez que votre entrée soit lue uniquement. Et vous pouvez utiliser l'attribut disabled si vous souhaitez que les entrées soient affichées, mais totalement désactivées (même les langages de traitement tels que PHP ne pourront pas les lire).

41
jolt

Juste pour compléter les réponses disponibles:

Un élément d’entrée peut être en lecture seule ou désactivé (aucun d’eux n’est éditable, mais il existe quelques différences: focus, ...)

Une bonne explication peut être trouvée ici:
Quelle est la différence entre disabled = “disabled” et readonly = “readonly” pour les champs de saisie de formulaire HTML?

Comment utiliser:

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

Il existe également quelques solutions pour le faire via CSS ou JavaScript, comme expliqué ici .

26
jsidera
<input type="text" value="3" class="field left" readonly>

Vous pouvez voir dans https://www.w3schools.com/tags/att_input_readonly.asp

La méthode pour définir "readonly":

$("input").attr("readonly", true)

pour annuler "readonly" (travail dans jQuery):

$("input").attr("readonly", false)
4
J. Fan

il vous suffit d'ajouter désactivé à la fin

<input type="text" value="3" class="field left" disabled>
3
Michan

ajouter l'attribut readonly

<input type="text" value="3" class="field left" readonly="readonly" >

ou -

<input type="text" value="3" class="field left" readonly>

pas besoin de css!

3
Vibhaas Srivastava

Ajoutez readonly:

<input type="text" value="3" class="field left" readonly>

Si vous souhaitez que la valeur ne soit pas soumise dans un formulaire, ajoutez plutôt l'attribut disabled.

<input type="text" value="3" class="field left" disabled>
1
zixuan