Discussion :

[Olivier Regnier]

Bonjour,

Je possède dans ma page Web une balise textarea qui par défaut est en lecture seule.

Voici le code HTML:

Code :

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

1
2
3
4
5
6
7
<div>
<textarea readonly="readonly"id="textarea1" rows="5" cols="62">Catalogue mobile (courrier)
Client(e) informé(e):
- Délai de réception:
Statut: envoyé.</textarea>
<p><button type="button" onclick="copy2clipboard(document.getElementById('textarea1'));">Copier</button></p>
</div>

Je souhaite via un script Javascript + un bouton, écrire dans cette balise afin d'y ajouter le délai de réception.

Avez-vous une idée, un exemple de script pour supprimer la lecture seule de ma petite balise ?

Merci d'avance

[Bovino]

Code :

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

document.getElementById('textarea1').readOnly = false;

[Olivier Regnier]

Bonjour,

Merci de ta réponse, je vais tester au plus vite le code que tu me proposes.

Merci

[Olivier Regnier]

Le code fonctionne très bien mais j'aimerai lui apporter une fonctionnalité supplémentaire à savoir lorsque je clique sur le bouton que le fond de ma balise textarea change de couleur.

Code :

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

<button type="button" onclick="document.getElementById('textarea1').readOnly=false;">Modifier</button>

avec un

Code :

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

setAttribute("style","background:yellow");

Est-il possible d'intégrer tout ce code Javascript dans une seule fonction afin d'alléger ma page web.

Merci d'avance

[Jumano]

Bonsoir,
Tu peux faire comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
function modifier() {
	document.getElementById('textarea1').readOnly=false;
	document.getElementById('textarea1').style.background='yellow';
	}
</script>
<div>
<textarea readonly="readonly" id="textarea1" rows="5" cols="62">Catalogue mobile (courrier)
Client(e) informé(e):
- Délai de réception:
Statut: envoyé.</textarea>
<p><button type="button" onclick="modifier()">Copier</button></p>

[Olivier Regnier]

Merci beaucoup. J'ai une dernière petite question. Si dans ma page web, j'ai plusieurs textarea1, textarea2 etc., comment dois-je m'y prendre ?

[Jumano]

S'il y a un bouton "modifier" pour chaque, il suffit de passer en paramètre l'id de ton textarea sur l'appel de la fonction.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
function modifier(id) {
	document.getElementById(id).readOnly=false;
	document.getElementById(id).style.background='yellow';
	}
</script>
<div>
<textarea readonly="readonly" id="textarea1" rows="5" cols="62">Test1</textarea>
<p><button type="button" onclick="modifier('textarea1')">Modifier</button></p>
</div>
<div>
<textarea readonly="readonly" id="textarea2" rows="5" cols="62">Test2</textarea>
<p><button type="button" onclick="modifier('textarea2')">Modifier</button></p>
</div>

[Olivier Regnier]

Merci, c'est nickel.

Pour terminer, j'ai une fonction qui permet de copier le contenu de ma balise textarea que voici:

Code :

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

1
2
3
4
5
6
function copy2clipboard(obj)
{
    var textRange=document.body.createTextRange();
    textRange.moveToElementText(obj);
    textRange.execCommand("Copy" );
}

Dans mon code html, j'obtiens le code suivant:

Code :

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

<button type="button" onclick="copy2clipboard(document.getElementById('textarea1'));">Copier</button>

Je souhaite réaliser le même type de fonction que tu m'as donné un peu plus haut afin de pouvoir également changer de couleur de fond lorsque que je clique sur le bouton copier.

J'ai tenter de l'écrire comme suit:

Code :

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

1
2
3
4
5
6
7
function copy2clipboard(obj, id){
    var textRange=document.body.createTextRange();
    textRange.moveToElementText(obj);
    textRange.execCommand("Copy" );
    document.getElementById(id).style.background='#EBEBE4';
    document.getElementById(id).readOnly=true;
}

mais ça bloque

En tout cas merci pour tout

[Jumano]

Essaye ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function copy2clipboard(id){
	var obj = document.getElementById(id);
    var textRange=document.body.createTextRange();
    textRange.moveToElementText(obj);
    textRange.execCommand("Copy");
    document.getElementById(id).style.background='#EBEBE4';
    document.getElementById(id).readOnly=true;
}
</script>
<button type="button" onclick="copy2clipboard('textarea1');">Copier</button>

EDIT : Si dans ta fonction tu attends deux paramètres, tu dois avoir deux paramètres dans l'appel de ta fonction.
Ce qui devait donner :

Code :

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

<button type="button" onclick="copy2clipboard(document.getElementById('textarea1'),'textarea1');">Copier</button>

[Olivier Regnier]

Merci

Je viens d'essayer le code et lorsque je valide avec le bouton copier il m'indique le message suivant concernant cette ligne:

Code :

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

textRange.moveToElementText(obj);

Pointeur non valide

[Jumano]

Apparemment, "createTextRange()" ne fonctionne que sous IE mais pas sous FF.

[Olivier Regnier]

Apparemment, "createTextRange()" ne fonctionne que sous IE mais pas sous FF.

J'utilise IE pour les tests

[Olivier Regnier]

J'ai trouvé, voici le code:

Code :

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

<button type="button" onclick="copy2clipboard(('textarea1'),'textarea1');">Copier</button>

Merci beaucoup pour ton aide

[Jumano]

Cà fonctionne sous FF ?

[Olivier Regnier]

Cà fonctionne sous FF ?

Non pas du tout. J'utilise ce script dans un fichier .chm avec HTML Help Workshop vu que dans ma société, on utilise IE

[Jumano]

Ce code fonctionnait pourtant (sous IE), pas d'erreur chez moi ...