Cómo copiar desde un sitio web al portapapeles de forma automática

Escenario

En más de una ocasión podréis encontraros con que algún cliente decide tener un botón para copiar un texto al portapapeles (clipboard) de forma automática en un sitio web. Esta tarea se torna extremadamente fácil si estamos usando Internet Explorer puesto que dispone de esa capacidad pero, en el caso de otros navegadores como Chrome, Firefox, Opera,… debemos buscar una alternativa.

Solución

Internet Explorer

Como ya he adelantado, en Internet Explorer es muy sencillo de realizar. Tan sólo habría que usar el objeto “window.clipboardData” para realizar la tarea que deseamos.

   1: window.clipboardData.setData('Text', "TEXTO A COPIAR");

Aquí tenemos más información sobre el objeto clipboardData y sobre el método setData

Esta solución, sólo será útil si nuestros usuarios usan siempre Internet Explorer o, si somos un poco “descuidados” de la experiencia que transmitimos a los usuarios con nuestro sitio web y no queremos implementarla para el resto de navegadores (FAIL)

Solución completa

Existe un complemento que podemos usar en nuestras aplicaciones web llamado ZeroClipboard que podemos usar para realizar esta tarea y que funcionará en la gran mayoría de los navegadores ya que combina JavaScript con Flash.

Para instalarlo, podemos hacerlo manualmente o desde Nuget (recomendado) tal y como se muestra en la siguiente secuencia de imágenes

Una vez tengamos instalado el complemento, será muy sencillo usarlo dependiendo únicamente de cómo queramos hacerlo.

Ejemplo simple

Voy a realizar el ejemplo en un sitio web ASP.NET MVC4 en el que supongamos que tenemos el siguiente código HTML con un div y un button.

   1:  

   2: <div id="divTextToClipboard">Este es el texto que quiero copiar</div>

   3: <button class="btnCopyToClipboard" data-clipboard-target="divTextToClipboard" data-clipboard-text="Default text">Copiar texto</button>

Como podemos ver, el botón tiene dos atributos añadidos “data-clipboard-target” y “data-clipboard-text” que son necesarios para un correcto funcionamiento de ZeroClipboard.

data-clipboard-target: id del elemento del que queremos copiar el texto. Puede ser un label, un div, un input,…

data-clipboard-text: texto por defecto que se copiará.

 

Una vez tenemos el código HTML necesario, tenemos que incluir el complemento ZeroClipboard para poder copiar el texto al portapapeles (clipboard) y, para ello veremos un ejemplo basado en lo que nos propone el creador del complemento una vez instalado ya que dispone de ejemplos para diversos eventos que podemos querer controlar.

   1: <script src="@Url.Content("~/Scripts/ZeroClipboard.min.js")"></script>

   2: <script>

   3:     $(function (){

   4:         var clip = new ZeroClipboard($(".btnCopyToClipboard"), {

   5:           moviePath: '@Url.Content("~/Scripts/ZeroClipboard.swf")' // ruta donde se encuentra el plugin

   6:         });

   7:  

   8:         clip.on('load', function(client){

   9:           // alert("movie is loaded" );

  10:         });

  11:  

  12:         clip.on('complete', function(client, args){

  13:           this.style.display = 'none'; // "this" is the element that was clicked

  14:           alert("Copied text to clipboard: " + args.text );

  15:         });

  16:  

  17:         clip.on('mouseover', function(client){

  18:           // alert("mouse over");

  19:         });

  20:  

  21:         clip.on('mouseout', function(client){

  22:           // alert("mouse out");

  23:         });

  24:  

  25:         clip.on('mousedown', function(client){

  26:  

  27:           // alert("mouse down");

  28:         });

  29:  

  30:         clip.on('mouseup', function(client){

  31:           // alert("mouse up");

  32:         });

  33:     });

  34: </script>

Se puede apreciar que el complemento se instancia mediante una referencia a los elementos que provocarán la copia de datos, en este caso un botón con el atributo “class” btnCopyToClipboard e indicando dónde se encuentra el archivo flash correspondiente al complemento ZeroClipboard. Además, disponemos de diferentes eventos asociados a los elementos referenciados en la instancia del complemento y que nos podrán ayudar a realizar diferentes tareas como por ejemplo avisar al usuario de que se ha realizado la copia del texto.

Como podéis ver, es muy fácil realizar esta tarea que, de otro modo, nos podría dar más de un dolor de cabeza

Para que os sea más fácil aún poder ver cómo funciona, podéis descargaros un ejemplo que he realizado desde aquí

También disponéis del ejemplo en línea de ZeroClipboard