Comment rendre une entrée de texte non modifiable?

344

J'ai donc une entrée de texte

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

Voici mon CSS pour ça

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 a-t-il un cadre ou une astuce à cela, je pensais plutôt faire une étiquette mais qu'en est-il du style. Comment les convertir et existe-t-il une meilleure méthode ou est-ce la seule solution?

html css html-input Matt Elhotiby
la source

Réponses:

706 
<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

BoltClock
la source
4
ou readonly = "readonly" si vous aimez que ce soit tout XML-y, voir l'exemple de Stephan Muller ci-dessous :)
Algy Taylor
1
@Algy Taylor: Oui, c'était dans la réponse d'origine lorsque la question d'origine avait une balise [xhtml] capricieuse qui a rendu tout le monde fou qui était valable pour quelle norme: /
BoltClock
existe-t-il un moyen de supprimer ce cercle rouge qui apparaît lorsque vous survolez textareaavec un readonlyattribut?
Chaudhry Waqas
1
@Shafizadeh - Non, et c'est une bonne chose. Ce serait difficile à mettre en œuvre correctement par les navigateurs et à comprendre pour les utilisateurs. n'essayez pas de faire un simple contrôle faire une tâche complexe. Divisez votre entrée en morceaux, chaque élément étant simple (un contrôle modifiable, puis un élément HTML non modifiable, puis un autre contrôle modifiable).
ToolmakerSteve
1
Assurez-vous également de vérifier ce côté serveur si vous ne souhaitez pas que la valeur soit conservée. Il est facile dans l'outil de développement du navigateur de supprimer l'attribut, ce qui à son tour rend le champ de saisie à nouveau modifiable.
Kurt Van den Branden
41

Vous pouvez utiliser l' readonlyattribut, si vous souhaitez que votre entrée soit uniquement lue. Et vous pouvez utiliser l' disabledattribut, si vous voulez que l'entrée soit affichée, mais totalement désactivée (même les langages de traitement comme PHP ne pourront pas les lire).

secousse
la source
2
Lorsque vous envoyez un formulaire à un fichier php, il ne lit pas les entrées désactivées. C'est peut-être ce qu'il voulait dire.
Carlos2W
3
ce qui se passe en réalité, c'est que les entrées désactivées NE SONT PAS MÊME ENVOYÉES lorsque vous soumettez un formulaire, n'ont rien à voir avec php, js ou quoi que ce soit.
vasilevich
28

Juste pour compléter les réponses disponibles:

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

Une bonne explication peut être trouvée ici:
Quelle est la différence entre désactivé = "désactivé" 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 des solutions pour le faire via CSS ou JavaScript, comme expliqué ici .

jsidera
la source
5
Si vous allez utiliser />pour fermer vos balises, vous pouvez également étendre vos attributs à disabled="disabled"et readonly="readonly"aussi.
BoltClock
5 
<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 "en lecture seule":

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

pour annuler "en lecture seule" (travail dans jQuery): 

$("input").attr("readonly", false)
J. Fan
la source
3

ajouter l'attribut en lecture seule

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

ou -

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

aucun css nécessaire!

Vibhaas Srivastava
la source
22
Qu'est-ce que cela ajoute à la question que ma réponse et la réponse de Stephan de plus de 3 ans auparavant ne faisaient pas déjà? Vous avez même reflété ma déclaration selon laquelle CSS n'était pas nécessaire.
BoltClock
2

vous avez juste besoin d'ajouter désactivé à la fin

<input type="text" value="3" class="field left" disabled>
Michan
la source
1
La valeur n'est pas soumise si vous la définissez sur désactivé. C'est peut-être ce dont vous avez besoin, mais ce n'est pas ce qui vous a été demandé. En
passant
2

Ajouter 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' disabledattribut.

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

Il n'y a aucun moyen d'utiliser CSS qui fonctionne toujours pour ce faire.

Pourquoi? CSS ne peut rien "désactiver". Vous pouvez toujours désactiver l'affichage ou la visibilité et l'utilisation, pointer-events: nonemais pointer-eventsne fonctionne pas sur les versions d'IE qui sont sorties avant IE 11.

zixuan
la source
0

si vous voulez vraiment utiliser CSS , utilisez la propriété suivante qui rendra le champ non modifiable.

pointer-events: none;
saadk
la source
Oh oh oh. Cela ne fonctionne pas dans certains navigateurs.
zixuan