Copier le contenu d'une DIV dans le presse-papier

**hygieaa** · 09/10/2015, 11h23

Bonjour à tous ceux qui liront ce post..

J'ai réalisé une liste de recettes en HTML et je voudrais adjoindre la fonction 'copier la recette dans le presse papier' evec un bouton et une fonction en javascript..
Afin de pouvoir envoyer la recette par mail ou SMS..

Actuellement j'ai réussi en glanant des codes par-ci par-là, à mettre le bouton 'Imprimer la recette' et cette fonction est OK sur Firefox..

Mais je coince pour la fonction 'copier..
Vous aurez compris que je n'y connais pas grand chose..! sauf en cuisine.. Chacun son truc..

Voici le code(partiel) HTML de mon fichier

Un GRAND MERCI à celui qui pourra me donner un code soit à l'aide d'un TextArea invisible, soit par une fonction copyDiv ou autre..
Les recettes sont dans des blocs DIV.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script language="JavaScript"  type="text/javascript">     
 
<!--Ici Fonction impression--> 
    function printdiv(divID)
    {
      var headstr = "<html><head><title></title></head><body>";
      var footstr = "</body>";
      var newstr = document.all.item(divID).innerHTML;
      var oldstr = document.body.innerHTML;
      document.body.innerHTML = headstr+newstr+footstr;
      window.print();
      document.body.innerHTML = oldstr;
      return false;
    }
 
<!--Ici Fonction copie-->
<!--Fonction à créer-->
 
 
 
</script>
</head>
 
 
<!--Ici bouton impression et appel fonction impression-->
<input name="b_print" type=button value=" Impression " style="font-weight:bold;font-family:times_new_roman;font-size:12px"
onclick="printdiv('recettenumero1');">
 
 
<!--Ici bouton copie et appel fonction copie-->
<input type=button value="       Copie       " style="font-weight:bold;font-family:times_new_roman;font-size:12px"
onClick="????">
 
 
<!--Début de zone recette  DIV-->
<div id=recettenumero1>
 
<p class=MsoNormal>
<b><u><span style='font-size:14.0pt;
 
color:black'>COOKIES</u></b></p>
 
Ceci est la recette...<br>
 
Bla Bla Bla......<br>
 
Fin de la recette<br>
 
 
<!--Fin de zone recette-->
</div>
 
</body>
</html>

**SylvainPV** · 09/10/2015, 11h33

Cette lib devrait t'aider: http://zenorocha.github.io/clipboard.js/

Code :

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

<input type=button value="       Copie       " data-clipboard-target="#recettenumero1">

**hygieaa** · 09/10/2015, 12h58

Merci bcp pour le lien..
Je consulte!!

**hygieaa** · 09/10/2015, 15h10

Coucou

J'ai testé et cela ne fonctionne pas!!

Je m'en doutais car cette solution avait l'air trop simpliste

Il s'agit de copier le contenu de la div dans le clipboard..

Désolé

Je cherche encore..

Cordialement

**SylvainPV** · 09/10/2015, 15h19

Tu as plus d'infos qu'un "ça ne fonctionne pas" ? Peut-être montrer ce que tu as fait ?

**hygieaa** · 09/10/2015, 16h01

Bonjour

Comme je l'ai dit, j'y connais rien

Moi g tout simplement ajouté la ligne que tu m'as donnée:

<input type=button value=" Copie " data-clipboard-target="#recettenumero1">

Dans mon HTML

et g vu que ça ne fonctionnait pas

Alors que le bouton impression fonctionne bien

D'ailleurs j'ai adressé le code HTML de la page de test
Et tu peux faire le test toi même..

Désolé de t'importuner

Alain

**SylvainPV** · 09/10/2015, 16h44

Si tu ne charges pas la bibliothèque et ne l'initialise pas, ça ne peut pas marcher.

Voilà, je suis reparti de ton exemple et j'ai intégré la bibliothèque, tu as juste à reprendre les modifs que tu vois :

http://jsfiddle.net/t8kp2jyk/

**hygieaa** · 09/10/2015, 17h54

Bonsoir

J'ai suivi le lien http://jsfiddle.net/t8kp2jyk/

Je clique sur copie et ça ne copie rien dans le presse papier..

Ensuite si je regarde le code source de la page web

Y a quand même bcp de code..

Tout ce code doit il être recopié dans ma page web???

bien cordialement

alain

**SylvainPV** · 09/10/2015, 18h02

Tu testes avec quel navigateur ? J'ai testé, ça marche avec Chrome et Firefox.

Le code source nécessaire, tu l'as sous les yeux. Le reste est JSFiddle, la solution pour tester rapidement un code HTML/CSS/JS, et n'a rien à voir avec ton problème.

**hygieaa** · 09/10/2015, 18h27

Oui g firefox

Je clique sur copie et normalement je devrais retrouver le bla bla dans le clipboard
si je fais un coller dans le bloc note y a rien

Ne crois tu pas qu'en abusant de ta gentillesse si ru me renvoyais mon fichier html avec tout ce qui doit y avoir dedans ce serait pour moi plus facile??

cordialement alain

**SylvainPV** · 09/10/2015, 19h40

Je ne sais pas quoi te dire, je n'ai aucun problème avec la démo sur Firefox. Essaie de mettre à jour ton navigateur.

Voilà le truc tout cuit dans le bec, vu que tu m'as bien fait comprendre que tu n'y connaissais rien et que visiblement tu n'as pas envie de remédier à ça.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script> 
</head>
 
<body>
 
<!--Ici bouton impression et appel fonction impression-->
<input name="b_print" type=button value=" Impression " style="font-weight:bold;font-family:times_new_roman;font-size:12px"
onclick="printdiv('recettenumero1');">
 
 
<!--Ici bouton copie et appel fonction copie-->
<input type="button" value="Copie" data-copy-target="recettenumero1" style="font-weight:bold;font-family:times_new_roman;font-size:12px">
 
 
<!--Début de zone recette  DIV-->
<div id="recettenumero1">
 
<p class="MsoNormal">
<b><u><span style='font-size:14.0pt; color:black'>COOKIES</u></b></p>
 
Ceci est la recette...<br>
 
Bla Bla Bla......<br>
 
Fin de la recette<br>
 
<!--Fin de zone recette-->
</div>
 
<script>
    function printdiv(divID)
    {
      var headstr = "<html><head><title></title></head><body>";
      var footstr = "</body>";
      var newstr = document.all.item(divID).innerHTML;
      var oldstr = document.body.innerHTML;
      document.body.innerHTML = headstr+newstr+footstr;
      window.print();
      document.body.innerHTML = oldstr;
      return false;
    }
 
new Clipboard("[data-copy-target]", {
    text: function(trigger) {
        alert("Recette copiée dans le presse-papier");
        return document.getElementById(trigger.getAttribute('data-copy-target')).textContent;
    }
});
</script>
</body>
</html>

**hygieaa** · 09/10/2015, 20h53

Je te remercie de ta compréhension
Je teste tout ça demain..
Et ça devrait aller....
Bonne soirée
Alain.

**hygieaa** · 10/10/2015, 09h49

Bonjour
J'ai pu tester le code
En fait ce code je l'avais bien écrit comme ça hier suite à tes conseils

J'obtiens bien les 2 boutons sans pb

La partie impression est tjrs OK

Par contre quand on clique sur 'copie'

On obtient bien le message..

Mais suis désolé de dire que quand on tente de vider le presse papier il n'y a rien dedans..!!

Voilà salutations..