2010-05-10 9 views
12

Je ne peux tout simplement pas obtenir cette chose. Comment ZeroClipboard est-il supposé fonctionner? Pourquoi a-t-il besoin de déplacer l'élément flash sur le texte copié?Comment utiliser réellement ZeroClipboard dans jQuery?

J'ai lu cette chose: http://code.google.com/p/zeroclipboard/wiki/Instructions

Quelqu'un peut-il me fournir un court extrait, ce qui permet de copier un texte dans la variable pour les utilisateurs presse-papiers, lorsque l'utilisateur clique sur un lien. Est-ce seulement possible? Je m'en fous, si ça ne marche pas sur tous les navigateurs (IE6 par exemple).

J'utilise jQuery.

+23

En regardant cette page, quelqu'un d'autre a-t-il remarqué que IE s'appelait "Internet Exploder"? – Eric

+5

Je pense que c'est le bon terme pour le navigateur, mais quelqu'un a-t-il le temps de m'aider? :) –

+2

@ Eric + 500 pour voir que :) (oh bien je peux juste upvote le commentaire) – Kamal

Répondre

8

Le code "exemple minimal" donné sur la page à laquelle vous liez (http://code.google.com/p/zeroclipboard/wiki/Instructions#Minimal_Example) semble être ce que vous voulez. Je l'ai copié ici et je l'ai modifié pour montrer comment mettre du texte dans une variable, puis copier ce texte dans le presse-papiers, puisque c'est ce qui vous intéresse. Notez que, dans la vraie vie, ce que vous voulez probablement faire est appelez la partie clip.setText() dans certaines fonctions, car vous ne savez peut-être pas, au moment où la page est chargée pour la première fois, quel texte vous voulez copier.

<html> 
<body> 
     <script type="text/javascript" src="ZeroClipboard.js"></script> 

     <div id="d_clip_button" style="border:1px solid black; padding:20px;">Copy To Clipboard</div> 

     <script language="JavaScript"> 
       var clip = new ZeroClipboard.Client(); 
       var myTextToCopy = "Hi, this is the text to copy!"; 
       clip.setText(myTextToCopy); 
       clip.glue('d_clip_button'); 
     </script> 
</body> 
</html> 

L'élément flash n'a pas besoin d'être "sur le texte copié"; il doit être "collé" à tout élément DOM que vous voulez que votre utilisateur manipule - probablement un bouton sur lequel cliquer. La raison en est que Javascript n'a pas accès au presse-papiers, vous devez donc utiliser Flash à la place. Mais Flash ne peut fonctionner que sur la machine de l'utilisateur en réponse à un clic de l'utilisateur - de sorte que vous "trompez" l'utilisateur en cliquant sur le Flash en faisant une superposition invisible sur un élément HTML. Je noterai que même si l'exemple particulier de la copie dans le presse-papiers de l'utilisateur est probablement bénin, cette approche me trouble, car il ne serait pas difficile d'imaginer que l'élément flash caché fasse quelque chose de plus malveillant.

+0

Hey, merci pour votre excellente réponse! Tout changement d'obtenir un exemple de code à coller? :) –

+0

OK, ajout d'un exemple de code copié et légèrement modifié à partir de la page d'instructions. –

+0

Wow, ça marche. Je vous remercie! –

1

Ce code ne fonctionne que dans ma configuration avec chrome quand j'ai une étiquette dans mon corps-région comme

<script type="text/javascript" src="js-file-doesnt-exists-404.js"></script> 
<div> 
...... 
some stuff here 
...... 
.... 
</div> 
...some more stuff.... 
<the button> 
.... 

lorsque le fichier include est supprimé le bouton ne fonctionne pas vraiment étrange ....

3

Un exemple jquery un peu plus complexe. Copiez le texte lorsque

<script language="JavaScript"> 
      ZeroClipboard.setMoviePath('zeroclipboard/ZeroClipboard.swf'); 
     $(document).ready(function(){ 
       $(".clickme").each(function (i) { 
        var clip = new ZeroClipboard.Client(); 

        var myTextToCopy = $(this).val(); 
        clip.setText(myTextToCopy); 
         clip.addEventListener('complete', function (client, text) { 
       alert("Copied text to clipboard."); 
       }); 
        clip.glue($(this).attr("id")); 



       }); 


     }); 

    </script> 



<?php 
//these text boxes were in a loop 
for($i=0;$i<10;$i++) 
    echo "<input type=\"text\" id=\"x$i\" class=\"clickme\" value=\"$value"\" />"; 

?> 
1

La version actuelle de ZeroClipboard contient en fait a bug qui provoquerait une erreur JS en utilisant le script proposé par JacobM - dans le scénario suivant:

  1. Créer une référence à la ZeroClipboard. Client() renvoyé par le nouveau constructeur. (par exemple var clip = new ZeroClipboard.Client();)
  2. Définissez le texte en faisant clip.setText ("chaîne");
  3. Modifier les DOM (cacher le film flash ou un élément ancêtre)
  4. Définir à nouveau le texte en faisant clip.setText (« une autre chaîne »)

Pour éviter de causer des erreurs, l'écouteur d'événement mouseover devrait plutôt être utilisé pour définir le texte:

<html> 
<body> 
    <script type="text/javascript" src="ZeroClipboard.js"></script> 

    <div id="d_clip_button">Copy To Clipboard</div> 

    <script language="JavaScript"> 
     var clip = new ZeroClipboard.Client(), 
      myTextToCopy = "Hi, this is the text to copy!";      
     clip.glue('d_clip_button'); 
     clip.addEventListener('onMouseOver', clipboardEvent); 
     function clipboardEvent() { 
      clip.setText(myTextToCopy); 
     } 
    </script> 
</body> 
</html>