Page 1 sur 2
Bouton Copier multiples
Posté : 05 oct. 2022, 11:05
par Boz
Bonjour,
Je ne suis qu'un humble intégrateur de JavaScript, et je m'arrache les cheveux :
Je voudrais mettre plusieurs boutons "copier" (pour copier un texte au choix) sur une page web.
J'ai utilisé plusieurs scripts, et j'ai toujours le même problème : Les boutons renvoient tous à la copie du Textarea n°1 au lieu de copier le texte que je cherche à associer :
Mon HTML :
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<link href="Text.css" rel="stylesheet" media="all" type="text/css">
</HEAD>
<BODY>
<textarea id="textArea" rows="4" cols="33";>
Text 1</textarea>
<button onclick="copyToClipBoard()">Copier</button>
<script src="a.js"></script>
</br>
<textarea id="textArea" rows="4" cols="20";>
Text 2</textarea>
<button onclick="copyToClipBoard()">Copier</button>
<script src="a.js"></script>
</BODY>
</HTML>
Mon JavaScript :
Code : Tout sélectionner
function copyToClipBoard() {
var content = document.getElementById('textArea');
content.select();
document.execCommand('copy');
alert("Copie !");
}
J'ai essayé de Changer l'id de la TextArea.
J'ai essayé de créer un script par bouton...
Mais rien n'y fait, c'est toujours le premier textArea qui est copié.
Quelqu'un aurait une idée pour moi ?
Désolé pour le niveau de la question
Merci beaucoup à tous !!!!!
Re: Bouton Copier multiples
Posté : 05 oct. 2022, 11:29
par webmaster
Bonjour
Cela semble logique, document.getElementById('textArea') retourne le premier élément de la page
Il faut un identifiant unique par textarea
Re: Bouton Copier multiples
Posté : 05 oct. 2022, 12:13
par Boz
Merci beaucoup,
J'ai essayé de modifier donc par ceci :
JavaScript :
Code : Tout sélectionner
function copyToClipBoard() {
var content1 = document.getElementById('content1');
var content2 = document.getElementById('content2');
content.select();
document.execCommand('copy');
alert("Copie !");
}
HTML :
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<link href="Text.css" rel="stylesheet" media="all" type="text/css">
</HEAD>
<BODY>
<textarea id="content1" rows="4" cols="33";>
Text 1</textarea>
<button onclick="copyToClipBoard()">Copier</button>
<script src="a.js"></script>
</br>
<textarea id="content2" rows="4" cols="20";>
Text 2</textarea>
<button onclick="copyToClipBoard()">Copier</button>
<script src="a.js"></script>
</BODY>
</HTML>
Et ça ne fonctionne plus du tout
J'ai créé une variable pas Id de TextArea, mais j'arrive pas à les associer
Une idée pour moi ?
Dsl.. Je suis une bille en JS
Merci encore !!!
Re: Bouton Copier multiples
Posté : 05 oct. 2022, 14:06
par webmaster
Il faut simplement passer en paramètre le numero de textarea
Code : Tout sélectionner
function copyToClipBoard(num) {
var content = document.getElementById('content'+num);
content.select();
document.execCommand('copy');
alert("Copie !");
}
Et à l'appel sur chaque bouton on passe le bon numéro
Ca devrait fonctionner
Re: Bouton Copier multiples
Posté : 05 oct. 2022, 14:27
par Boz
J'ai modifié :
Mon JS :
Code : Tout sélectionner
function copyToClipBoard(num) {
var content = document.getElementById('content'+1);
var content = document.getElementById('content'+2);
content.select();
document.execCommand('copy');
alert("Copie !");
}
Mon HTML :
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<link href="Text.css" rel="stylesheet" media="all" type="text/css">
</HEAD>
<BODY>
<textarea id="content1" rows="4" cols="33";>
Text 1</textarea>
<button onclick="copyToClipBoard(1)">Copier</button>
<script src="a.js"></script>
</br>
<textarea id="content2" rows="4" cols="20";>
Text 2</textarea>
<button onclick="copyToClipBoard(2)">Copier</button>
<script src="a.js"></script>
</BODY>
</HTML>
Et maintenant, il copie le "Texte 2" sur les deux boutons "Copier"...
Une idée pour moi ?
Merci beaucoup pour tes réponses !!
Re: Bouton Copier multiples
Posté : 05 oct. 2022, 14:29
par webmaster
La fonction c'est ca :
Code : Tout sélectionner
function copyToClipBoard(num) {
var content = document.getElementById('content'+num);
content.select();
document.execCommand('copy');
alert("Copie !");
}
le code reprend "num" qui est passé dans les parentheses au clic du bouton
Re: Bouton Copier multiples
Posté : 05 oct. 2022, 16:36
par Boz
J'ai mis le chiffre entre les parenthèses du bouton.
Et ça ne fonctionne pas...
En JS, j'ai :
Code : Tout sélectionner
function copyToClipBoard(1) {
var content = document.getElementById('content'+1);
content.select();
document.execCommand('copy');
alert("Copie !");
}
function copyToClipBoard(2) {
var content = document.getElementById('content'+2);
content.select();
document.execCommand('copy');
alert("Copie !");
}
et en HTMH :
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<link href="Text.css" rel="stylesheet" media="all" type="text/css">
</HEAD>
<BODY>
<textarea id="content" rows="4" cols="33";>
Text 1</textarea>
<button onclick="copyToClipBoard(1)">Copier</button>
<script src="a.js"></script>
</br>
<textarea id="content" rows="4" cols="20";>
Text 2</textarea>
<button onclick="copyToClipBoard(2)">Copier</button>
<script src="a.js"></script>
</BODY>
</HTML>
Dans le JS, j'ai 2 boutons.
Dans le HTML, id=textarea, c'est correct, ou je dois ajouter 1 ou +1 ?
Pour l'instant, rien ne se copie...
Merci encore à toi !
Re: Bouton Copier multiples
Posté : 06 oct. 2022, 09:04
par webmaster
pourquoi tu changes le code que je te donne
la fonction c'est ca et uniquement ca:
Code : Tout sélectionner
function copyToClipBoard(num) {
var content = document.getElementById('content'+num);
content.select();
document.execCommand('copy');
alert("Copie !");
}
Re: Bouton Copier multiples
Posté : 06 oct. 2022, 12:36
par Boz
Désolé.
J'ai donc laissé le code JS sans toucher à rien.
Côté HTML :
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<link href="Text.css" rel="stylesheet" media="all" type="text/css">
</HEAD>
<BODY>
<textarea id="content" rows="4" cols="33";>
Text 1</textarea>
<button onclick="copyToClipBoard(num)">Copier</button>
</br>
<textarea id="content" rows="4" cols="20";>
Text 2</textarea>
<button onclick="copyToClipBoard(num)">Copier</button>
<script src="a.js"></script>
</BODY>
</HTML>
Pour l'instant ça ne copie rien...
J'ai essaye l'écriture : copyToClipBoard(num)
J'ai essaye l'écriture : copyToClipBoard(1)
J'ai essaye l'écriture : copyToClipBoard(+1)
J'ai essaye l'écriture : copyToClipBoard(num+1)
Aucun ne fonctionne.
De quelle façon faut-il lier le bouton au texte ?
Merci beaucoup à toi pour ta patience !!!
Re: Bouton Copier multiples
Posté : 06 oct. 2022, 17:29
par webmaster
Ok, c'est plus simple avec tout le code
Voici ce que ca donne :
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<link href="Text.css" rel="stylesheet" media="all" type="text/css">
</HEAD>
<BODY>
<script>
function copyToClipBoard(num) {
var content = document.getElementById('content'+num);
content.select();
document.execCommand('copy');
alert("Copie !");
}
</script>
<textarea id="content1" rows="4" cols="33";>
Text 1</textarea>
<button onclick="copyToClipBoard(1)">Copier</button>
</br>
<textarea id="content2" rows="4" cols="20";>
Text 2</textarea>
<button onclick="copyToClipBoard(2)">Copier</button>
<script src="a.js"></script>
</BODY>
</HTML>