Salut,
Je réponds ici à tes MP car ce n'est vraiment pas dans les habitudes du forum que de passer par ce biais pour résoudre un problème.
D'autant plus que d'autres personnes peuvent avoir le même type de soucis et que, dans ce cas, il ne trouveront pas de réponse; juste un sujet non résolu. Je continue donc ici.
Aussi, vu que tu ne peux dévoiler ta page, le préférable serait :
1- soit de reproduire une page de test comportant le même problème et de la mettre en ligne,
2- soit de fournir les codes HTML (page complète) et JS (tout ce qui touche à la zone traitée)
En parallèle, je te refournis un code documenté (à outrance) et posant moins de risque d'interactions avec d'autres scripts.
code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exemple</title>
<script type="text/javascript" src="openclose.js"></script>
<link rel="stylesheet" type="text/css" href="openclose.css" />
</head>
<body>
<form action="index.php" method="post">
<div>
<!-- Label visé par la fonction _selectControl -->
<label for="commentaires">Commentaires :</label>
<!-- Textarea recherché lors de l'éxécution de la fonction _openClose -->
<textarea name="commentaires" id="commentaires" cols="192" rows="4"></textarea>
</div>
<div>
<input type="submit" value="Transmettre" />
</div>
</form>
</body>
</html>
Fichier openclose.css
@media screen {
/* Position, au chargement de la page, du textarea lorsque Javascript est actif (on le sort de l'écran) */
.hasJS #commentaires {position:absolute; left:-20000px;}
/* Classe showComm permettant l'affichage du textarea */
.hasJS #commentaires.showComm {position:static;}
}
Fichier openclose.js
// Encapsulation du script au sein d'une fonction anonyme éxécutée directement pour limiter la portée du script
// Voir tuto : http://www.alsacreations.com/article/lire/565-JavaScript-organiser-son-code-en-modules.html
(function() {
// Fonction d'ajout de gestionnaire d'événements non intrusifs
// Voir tuto : http://www.alsacreations.com/article/lire/562-bonnes-pratiques-javascript.html#event
var _addEvent = function(oEl, sEvType, fn, bCapture) {
return document.addEventListener ?
oEl.addEventListener(sEvType, fn, bCapture || false):
oEl.attachEvent ?
oEl.attachEvent('on' + sEvType, fn):
false;
};
// Ajout d'une classe sur l'élément html afin de disposer des styles initiaux lorsque Javascript est disponible
// Voir astuce : http://www.alsacreations.com/astuce/lire/834-prechargement-styles-css-js.html
document.documentElement.className += ' hasJS';
// Fonction d'affichage et masquage sous certaines conditions
// @param: (object) oControl -> lien pilotant l'affichage / masquage
// @param: (object) oTarget -> élément affiché / masqué
// @param: (function) fTest -> Fonction déterminant si l'élément doit être affiché ou masqué
var _openClose = function(oControl, oTarget, fTest) {
// Si on ne dispose pas, au minimum, d'un lien pilote et d'un élément à afficher / masquer,
// on sort de la fonction
if(!(oControl && oTarget)) {
return;
}
// Fonction d'affichage
var _affiche = function() {
// On modifie le contenu du lien pour avoir un texte adapté à la situation
oControl.innerHTML = 'Masqu' + oControl.innerHTML.slice(6);
// On ajoute la classe CSS affichant l'élément cible (textarea)
oTarget.className += ' showComm';
// Si la fonction _affiche n'a pas d'argument, on sélectionne le contenu de l'élément cible
if(arguments.length == 0) {
oTarget.select();
}
};
// Si une fonction est passée en troisième paramètre d'OpenClose et si celle-ci retourne true,
// on affiche l'élément cible (sans sélectionner son contenu)
if(fTest && fTest(oTarget)) {
_affiche(true);
}
// Gestionnaire d'événement au clic sur le lien de contrôle
var _clickHandler = function(e) {
// Si l'élément cible comporte la classe showComm (élément cible affiché)
if(/\bshowComm\b/.test(oTarget.className)) {
// On modifie le contenu du lien pour avoir un texte adapté à la situation
oControl.innerHTML = 'Affich' + oControl.innerHTML.slice(5);
// On supprime la classe CSS pour masquer l'élément cible (textarea)
oTarget.className = oTarget.className.replace(/\bshowComm\b/, '');
}
// ou bien, on affiche l'élément cible en sélectionnant son contenu
else {
_affiche();
}
// On annule l'action par défaut du lien pour éviter de suivre son href
e.preventDefault();
};
// On ajoute le gestionnaire d'événement au clic sur le lien de contrôle
_addEvent(oControl, 'click', _clickHandler);
};
// Fonction sélectionnant le "label" ayant l'attribut "for" indiqué en paramètre
// @param: (string) sFor -> valeur de l'attribut "for" recherché
var _selectControl = function(sFor) {
// On sélectionne tous les labels
var _aLabels = document.getElementsByTagName('label');
// On les parcourt un par un
for(var _iLabel = 0, _iCount = _aLabels.length; _iLabel < _iCount; _iLabel++) {
// Si le label courant a l'attribut "for" recherché
if(_aLabels[_iLabel].htmlFor == sFor) {
// On lui ajoute un lien interne en modifiant le contenu initial
// pour expliquer le type de contrôle
_aLabels[_iLabel].innerHTML = '<a href="#">Afficher les ' + _aLabels[_iLabel].innerHTML.toLowerCase() + '</a>';
// On sort de la fonction en retournant le lien de contrôle ainsi créé
return _aLabels[_iLabel].getElementsByTagName('a')[0];
}
}
// On sort de la fonction en retournant une valeur nulle si le label n'a pas été trouvé
return;
};
// Gestionnaire d'événement au chargement de la page
var _loadHandler = function() {
// On lance la fonction d'affichage / masquage en lui passant les paramètres souhaités
_openClose(
// On sélectionne le label ayant l'attribut "for" de valeur "commentaires"
_selectControl('commentaires'),
// On sélectionne l'élément ayant l'identifiant "commentaires"
document.getElementById('commentaires'),
// On charge une fonction vérifiant que le contenu de l'élément cible est non nul.
function(oEl) {
return oEl.value.length != 0;
}
);
};
// On ajoute le gestionnaire d'événement au chargement de la page
_addEvent(window, 'load', _loadHandler);
})();
Je te disais justement de passer par un "label" associé à ton "textarea" car c'est ce que prévoit le script.
Excuse moi au départ j'avais bien remplacé par ceci:
