2010-05-10 11 views
12

Simplemente no puedo obtener esto. ¿Cómo se supone que ZeroClipboard funciona? ¿Por qué necesita mover el elemento flash sobre el texto copiado?¿Cómo se usa ZeroClipboard en jQuery?

he leído esta cosa: http://code.google.com/p/zeroclipboard/wiki/Instructions

Puede alguien proporcionar un fragmento corto, lo que hace que sea posible copiar un texto en el portapapeles variable para los usuarios, cuando el usuario hace clic en un enlace. ¿Esto es posible? No me importa, si no funciona en todos los navegadores (IE6, por ejemplo).

Estoy usando jQuery.

+23

en cuanto a esa página, lo hizo ningún otro aviso de que IE fue llamado "detonador de Internet"? – Eric

+5

Creo que es el término correcto para el navegador, pero ¿alguien tiene algo de tiempo para ayudarme? :) –

+2

@ Eric + 500 por ver eso :) (bueno, puedo votar el comentario) – Kamal

Respuesta

8

El código de "ejemplo mínimo" dado en la página que enlaza (http://code.google.com/p/zeroclipboard/wiki/Instructions#Minimal_Example) parece ser lo que desea. Lo he copiado aquí y lo he alterado para demostrar poner texto en una variable y luego copiar ese texto en el portapapeles, ya que eso es lo que le interesa. Tenga en cuenta que, en la vida real, lo que presumiblemente desea hacer es llame a la parte clip.setText() dentro de alguna función, ya que es posible que no sepa, en el momento en que se carga por primera vez, qué texto desea copiar.

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

El elemento flash no necesita estar "sobre el texto copiado"; necesita ser "pegado" a cualquier elemento DOM que desee que manipule su usuario, lo más probable es que haga clic en un botón. La razón es que Javascript no tiene acceso al portapapeles, por lo que debe usar Flash en su lugar. Pero Flash solo puede operar en la máquina del usuario en respuesta al clic de un usuario, por lo que "engaña" al usuario para que haga clic en el Flash al convertirlo en una superposición invisible sobre un elemento HTML.

Notaré que si bien el ejemplo particular de copiar en el portapapeles del usuario es probablemente benigno, este enfoque me preocupa, ya que no sería difícil imaginar que el elemento flash oculto hiciera algo más malicioso.

+0

¡Hola, gracias por tu gran respuesta! ¿Algún cambio para obtener un código de muestra para pegar? :) –

+0

OK, se agregó un código de muestra copiado y ligeramente modificado desde la página de instrucciones. –

+0

Guau, funciona. ¡Gracias! –

1

Este código sólo funciona en mi programa de instalación junto con el cromo cuando tengo una etiqueta en mi cuerpo-zona como

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

cuando el archivo se elimina incluyen el botón no está funcionando realmente extraño ....

3

Un ejemplo de jquery un poco más complejo. Copiar el texto cuando

<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 versión actual de ZeroClipboard realidad contiene a bug que causaría un error JS usando el guión sugerido por JacobM - En el siguiente escenario:

  1. crear una referencia a la ZeroClipboard. Cliente() devuelto por el nuevo constructor. (por ejemplo var clip = new ZeroClipboard.Client();)
  2. Establezca el texto haciendo clip.setText ("cadena");
  3. Cambiar el DOM (ocultar la película flash o un elemento antecesor)
  4. Establecer el texto de nuevo haciendo clip.setText ("alguna otra cadena")

Para evitar causar errores, el detector de eventos mouseover en su lugar debe utilizarse para establecer el texto:

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