text readonly avec une couleur

bender86 · 16/01/2011, 13h19

Bonjour,

Je débute avec le css et j'aimerais savoir comment faire pour que mes input text aient une certaine couleur et soit readonly.
Et quand je clique sur un bouton, il faudrait qu'il ne soit plus en readonly et aient une autre couleur.

Mon problème est que je ne sais pas comment mettre en place ça avec un css.

Si quelqu'un avait un exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" name="nDossier" id="nDossier" size="20" tabindex="4" readOnly="true" style="background-color : #FFFAA9;" value="<?php echo $cSoc ?>"/>

Merci

Auteur · 16/01/2011, 17h16

bonjour,

pour résoudre ton problème il te faut du CSS et un peu de javascript :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
.texteLectureSeule{
	background-color: #0000FF;
	color: #FFFFFF;
};
 
.texte{
	background-color: #FFFFFF;
	color: #000000;
};

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function clicBouton()
{
	var objet = document.getElementById("monInput");
	objet.className="texte";
	objet.readOnly = false;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<input id="monInput" class="texteLectureSeule" type="text" readonly="readonly" value="salut tout le monde !" />
<input type="button" value="Cliquez ici" onclick="clicBouton()"/>

bender86 · 16/01/2011, 19h55

Merci de ta réponse mais j'arrive pas à ce que ça fonctionne.

j'ai mon champ

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" readOnly="readOnly" name="txtnPat" tabindex="6" id="txtnPat" size="40" value="<?php echo $n1Soc ?>"/>

et à l'event d'un clique j'ai ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('txtnPat').className="textRO";

et voilà dans mon fichier css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.textRO{
	background-color: #aec9fb;
	color: #aec9fb;
}

Le fichier est bien inclus dans ma page car je l'utilise pour faire un cadre à mes tables.

merci pour votre aide

Auteur · 16/01/2011, 22h53

La syntaxe HTML est bien précise :

les attributs sont en minuscules

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="text" readonly="readonly" name="txtnPat" tabindex="6" id="txtnPat" size="40" value="<?php echo $n1Soc ?>"/>

- Dans la partie javascript tu ne désactives pas la lecture seule, regarde à nouveau le code que j'ai posté

Voici un exemple d'implémentation du code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
 
<script type="text/javascript">
function clicBouton()
{
	var objet = document.getElementById("txtnPat");
	objet.className="texte";
	objet.readOnly = false;
}
</script> 
 
 
<style type="text/css">
<!--
.texteLectureSeule{
	background-color: #0000FF;
	color: #FFFFFF;
};
 
.texte{
	background-color: #FFFFFF;
	color: #000000;
};
 
-->
</style> 
 
 
</head>
 
<body>
<input type="text" class="texteLectureSeule" readonly="readonly" name="txtnPat" tabindex="6" id="txtnPat" size="40" value="salut tout le monde !"/>
<input type="button" value="Cliquez ici" onclick="clicBouton()"/>
 
</body>
</html>

bender86 · 17/01/2011, 22h22

Le probleme si on met le readonly sans majuscule. Internet explorer ne l accepte pas. Et la couleur de mon champ texte ne change qd meme pas.

Merci de votre aide

Auteur · 18/01/2011, 09h41

Citation:

Envoyé par bender86

Le probleme si on met le readonly sans majuscule. Internet explorer ne l accepte pas. Et la couleur de mon champ texte ne change qd meme pas.

As-tu testé le code que j'ai posté ? Je n'ai pas de souci avec Internet Explorer et Firefox.
Montre nous le code généré (sans PHP) de ta page

mikah · 20/01/2011, 10h41

Bonjour,

pour définir une couleur spécifique à un input avec l'attribut readonly il faut utiliser un sélecteur comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
input[readonly="readonly"] {
 color:#999;
}

Ensuite, pour mettre automatiquement ton input en readonly ce code javascript devrait t'aider :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('txtnPat')[0].setAttribute("readonly","readonly");

Concernant l'écriture du "readonly", il faut en effet le mettre tout en minuscule, IE le prend bien en compte.

16/01/2011, 13h19	#1
bender86 Membre à l'essai Inscription : mai 2008 Messages : 208 Détails du profil Informations personnelles : Localisation : Belgique Informations forums : Inscription : mai 2008 Messages : 208 Points : 24 Points : 24	text readonly avec une couleur Bonjour, Je débute avec le css et j'aimerais savoir comment faire pour que mes input text aient une certaine couleur et soit readonly. Et quand je clique sur un bouton, il faudrait qu'il ne soit plus en readonly et aient une autre couleur. Mon problème est que je ne sais pas comment mettre en place ça avec un css. Si quelqu'un avait un exemple Code : Sélectionner tout - Visualiser dans une fenêtre à part <input type="text" name="nDossier" id="nDossier" size="20" tabindex="4" readOnly="true" style="background-color : #FFFAA9;" value="<?php echo $cSoc ?>"/> Merci
	00

17/01/2011, 22h22	#5
bender86 Membre à l'essai Inscription : mai 2008 Messages : 208 Détails du profil Informations personnelles : Localisation : Belgique Informations forums : Inscription : mai 2008 Messages : 208 Points : 24 Points : 24	Le probleme si on met le readonly sans majuscule. Internet explorer ne l accepte pas. Et la couleur de mon champ texte ne change qd meme pas. Merci de votre aide
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email