Copiar en el portapapeles con Javascript

03/7/06 - El script que vamos a comentar sirve para seleccionar un texto que hay en un textarea y copiarlo en el portapapeles. Esta es una tarea que se puede realizar fácilmente en Internet Explorer, pero que da algún mayor quebradero de cabeza en Firefox.

Internet Explorer dispone de un par de mecanismos para copiar texto en el portapapeles. En MSDN he obtenido una referencia para hacer esto de una manera sencilla, a partir de las cual he confeccionado el siguiente script:

<form name="f1">
<textarea cols="50" rows="5" name="campo1">Hola. Este texto es el que vamos a seleccionar y copiar.</textarea>
<br>
<input type="button" value="Copiar" onclick="copia_portapapeles()">
</form>

<script language="javascript">

function copia_portapapeles(){
   document.f1.campo1.select()
   window.clipboardData.setData("Text", document.f1.campo1.value);
}
</script>

Tenemos un formulario con un textarea y un botón. En el textarea hay un texto y al pulsar el botón se seleccionará y copiará el texto. Utilizamos el método setData() del objeto clipboardData. Este método recibe dos parámetros. El primero indica el tipo de formato de la información a copiar y el segundo es la cadena de texto que se va a introducir en el portapapeles.

Lo malo es que este script no funciona con Firefox. Esto es porque este navegador no tiene el objeto clipboardData. Parece ser que este objeto es propio de Internet Explorer, aunque Firefox también debe considerar que copiar en el portapapeles conlleva algunos posibles agujeros de seguridad, por lo que no permite en principio trabajar con el portapapeles.

Para que esta función no lance un error javascript al ejecutarla, tenemos que prevenir la llamada al método setData() del objeto clipboardData, para que no se realice si no existe tal objeto. La función quedaría de la siguiente manera:

function copia_portapapeles(){
   document.f1.campo1.select()
   if (window.clipboardData){
      window.clipboardData.setData("Text", document.f1.campo1.value);
   }
}

Simplemente se comprueba si existe window.clipboardData, evaluándolo en un if, antes de ejecutar su método. En Firefox, que no tiene window.clipboardData, simplemente se seleccionará el texto, pero no se llegará a copiar en el portapapeles.

Para hacer un script que copie un texto en el portapapeles y funcione en Firefox se debe utilizar otro mecanismo más complejo, que no he investigado a fondo. El tema es que, aunque funciona, debería configurarse Firefox para permitir ese tipo de acciones, o realizar un script firmado (http://www.mozilla.org/projects/security/components/signed-scripts.html).

Os paso la URL donde se puede obtener más información sobre este script para copiar en el portapapeles compatible con Firefox es: http://www.krikkit.net/howto_javascript_copy_clipboard.html

El script que utilizan es el siguiente:

<script language="javascript" type="text/javascript">
<!--
function copy_clip(meintext)
{
if (window.clipboardData)
    {

    // the IE-manier
   window.clipboardData.setData("Text", meintext);

   // waarschijnlijk niet de beste manier om Moz/NS te detecteren;
   // het is mij echter onbekend vanaf welke versie dit precies werkt:
   }
   else if (window.netscape)
   {

   // dit is belangrijk maar staat nergens duidelijk vermeld:
   // you have to sign the code to enable this, or see notes below
   netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

   // maak een interface naar het clipboard
   var clip = Components.classes['@mozilla.org/widget/clipboard;1']
       .createInstance(Components.interfaces.nsIClipboard);
   if (!clip) return;

   // maak een transferable
   var trans = Components.classes['@mozilla.org/widget/transferable;1']
       .createInstance(Components.interfaces.nsITransferable);
   if (!trans) return;

   // specificeer wat voor soort data we op willen halen; text in dit geval
   trans.addDataFlavor('text/unicode');

   // om de data uit de transferable te halen hebben we 2 nieuwe objecten
   // nodig om het in op te slaan
   var str = new Object();
   var len = new Object();

   var str = Components.classes["@mozilla.org/supports-string;1"]
       .createInstance(Components.interfaces.nsISupportsString);

   var copytext=meintext;

   str.data=copytext;

   trans.setTransferData("text/unicode",str,copytext.length*2);

   var clipid=Components.interfaces.nsIClipboard;

   if (!clip) return false;

   clip.setData(trans,null,clipid.kGlobalClipboard);

   }
   alert("Following info was copied to your clipboard:\n\n" + meintext);
   return false;
}
//-->
</script>

A su vez, esta página ha sacado la pista de una web en alemán, por eso aparecen comentarios en dicho idioma. Las referencias son:
http://www.xulplanet.com/tutorials/xultu/clipboard.html
http://www.codebase.nl/index.php/command/viewcode/id/174

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 2 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

  Ir arriba