Discussion :

[Crazyblinkgirl]

Bonjour à tous,

J'ai un petit problème pour modifier le style d'un champ texte. En effet, lors du chargement de ma page, ce dernier apparait comme un simple texte que l'on ne peut pas modifier:

Code :

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

1
2
<input class="inputReadonly" type="text" name="designation" value="designation" size="30" maxlength="30" readonly/>
<input type="submit" name="action" value="Modifier" onclick="javascript:ModifChamp();"/>

Code CSS :

Code :

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

1
2
3
4
.inputReadonly {
  border: none;
  background-color: transparent;
}

Par contre, lorque l'on clique sur le bouton Modifier, je souhaiterai que le champ s'affiche comme un champ texte normal afin de pouvoir modifier la valeur par défaut. J'ai donc fait :

Code :

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

1
2
3
4
5
function ModifChamp(){
  document.forms[0].designation.style.backgroundColor ='white';
  document.forms[0].designation.style.readOnly =false;
  document.forms[0].designation.style.border='solid';
}

Cela semble fonctionner mais seulement au clik du bouton, le style redevient instantannément celui de départ.

Que faut-il que je modifie pour que cela fonctionne correctement?

Merci d'avance pour toute aide.

[AlphaYoDa]

ta gestion du ReadOnly me parait douteuse.. dans le premier cas en HTML, c'est juste tu dois avoir :

readonly="readonly"

(ou readonly tout court mais c'est déprécié me semble-t-il)

mais en CSS, tu essaies de retirer le readonly qui est pourtant un paramètre HTML et non de style , il y a contradiction entre ton 'readonly' et ton 'document.forms[0].designation.style.readOnly =false; '

non ?

[Crazyblinkgirl]

Merci pour ta réponse,

J'ai corrigé ce point mais j'ai toujours le même pb

[SpaceFrog]

Code :

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

document.forms[0].designation.style.readOnly =false;

le readOnly n'est pas rattaché au style ????

Code :

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

document.forms[0].designation.readOnly ;

[Crazyblinkgirl]

Je ne dois pas être très douée car même avec tout ca, cela ne fonctionne toujours pas

[franculo_caoulene]

Cela semble fonctionner mais seulement au clik du bouton, le style redevient instantannément celui de départ.

C'est ça que je ne comprends pas moi!

[Crazyblinkgirl]

Et bien, lorsque je clique sur le bouton modifier, le champ reprend l'allure d'un champ input text normal mais cela dure uniquement le temps d'appuyer sur le bouton.

Du coup je ne peux rien y saisir pour modifier la valeur initiale.

[franculo_caoulene]

T'aurais un exemple en ligne s'il te plaît? Je vois maintenant ce que tu veux dire mais je préfère regarder directement...

[Crazyblinkgirl]

Malheureusement non mais c'est comme si le message de ta réponse était dans un input apparaissant comme un simple texte et que tu avais un bouton qui en cliquant dessus permettrait de le modifier en faisant apparaitre le texte dans un input classique.

J'espère avoir été un peu plus précise

[franculo_caoulene]

En fait c'est tout bête, enfin d'après ce que tu donnes. Ton bouton "Modifier" ne doit pas être de type submit mais de type button car le submit recharge la page donc ta page reprend son état initial.

Pour info le "javascript:" dans l'attribut onclick ne sert à rien.

[Crazyblinkgirl]

Effectivement c'est ca, dire que j'ai essayé un tas de bidouilles

Je te remercie beaucoup pour avoir pris le temps de m'aider (ainsi que AlphaYoDa et SpaceFrog).

Bonne fin de journée à tous!