Modifier une balise textarea via Javascript

Bonjour,

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

Voici le code HTML:

Code:

---

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 :mrgreen:

Code:

---

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

---

Bonjour,

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

Merci :mrgreen:

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:

---

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

---

avec un

Code:

---

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 :mrgreen:

Bonsoir,
Tu peux faire comme ceci :

Code:

---

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>

---

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 ? :oops:

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:

---

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>

---

Merci, c'est nickel.

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

Code:

---

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:

---

<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:

---

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 :oops:

En tout cas merci pour tout :mrgreen:

Essaye ceci :

Code:

---

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:

---

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

---

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:

---

textRange.moveToElementText(obj);

---

Pointeur non valide :oops:

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

Citation:

---

Envoyé par Jumano

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

---

J'utilise IE pour les tests :mouarf:

J'ai trouvé, voici le code:

Code:

---

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

---

Merci beaucoup pour ton aide :hola:

Cà fonctionne sous FF ?

Citation:

---

Envoyé par Jumano

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 :aie:

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