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.