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