Copiar texto o código al portapapeles usando ClipBoard.js

En algunas páginas de esta sección compartimos código fuente, el que se puede copiar al portapapeles, simplemente presionando un botón.
Este método es de gran utilidad y ayuda, cuando se trata de código o de cualquier otro contenido en formato de texto.
Puede implementarse la funcionalidad de forma muy sencilla, usando un script disponible en Github llamado "clipboard.js".
En este artículo mostramos como usarlo, con varios ejemplos prácticos.

Usar ClipBoard para copiar al portapapeles

ClipBoard es un útil proyecto en Github que proporciona una librería en JavaScript, que podemos emplear e implementar para facilitarles a los lectores de nuestras páginas, copiar al portapapeles texto, solamente presionando un botón o con cualquier otro evento.
Esto evita tener que seleccionar manualmente el contenido, cuando es extenso y usar la tradicional combinación de teclas Control + C.
Es de mucha utilidad para copiar directamente el código que compartimos, aunque también puede ser empleado para otras tareas similares.

Ejemplos del uso de ClipBoard

Copiar contenido de un cuadro de texto

En el siguiente ejemplo al presionar el botón "Copiar texto", se selecciona y se copia al portapapeles el contenido en el cuadro de texto y de tener éxito cambia de nombre el botón indicando ¡COPIADO!, cambiando también el color de fondo.
Texto 1 a copiar
Copiar texto

En navegadores antiguos que no soportan la funcionalidad "execCommand", el error provoca un cambio en la funcionalidad.
En este caso solo se selecciona el texto y en vez del mensaje "¡copiado!" el nombre del botón cambia a: "Usa Control + C".
Para hacerlo debemos de hacer lo siguiente:
- Asignar un identificador (ID) al cuadro de texto (textarea).
- Asignar al botón el identificador "copyClip" y el atributo data-clipboard-target="#id", donde id es el identificador anterior.
- Cargar el archivo "clipboard.min.js".
El código elemental usado en el ejemplo anterior es el siguiente:

<textarea cols='80' rows='4' id="codigo">
Texto a copiar
</textarea><br>
<button type="button" id="copyClip" data-clipboard-target="#codigo">Copiar texto</button>
<script src="clipboard.min.js"></script>

De forma similar a la anterior se puede copiar texto desde un elemento INPUT, el encerrado en un contenedor DIV o hasta en un PRE.
La limitación de este método es solo poder usar un botón u otro elemento, con el identificador necesario "copyClip".

Copiar texto desde varios elementos

Para copiar texto en elementos diferentes en una página, necesitamos lógicamente asignarles un identificador diferente y agregar un script especificando selectores, que puede ser una clase o un nombre de elemento.
Por ejemplo:
Texto 2 a copiar

Usa las teclas Control + C

Copiar texto

<!-- Codigo usado en este ejemplo -->
<textarea cols='80' rows='4' id="codigo2">Texto 2 a copiar</textarea><br>
<button type="button" class="bt1" data-clipboard-target="#codigo2">Copiar texto</button>
<pre id="codigo3">CONTENIDO</pre>
<button type="button" class="bt2" data-clipboard-target="#codigo3">Copiar código</button>
<script>
var clipboard2 = new Clipboard('.bt1');
var clipboard3 = new Clipboard('.bt2');
</script>

Usa las teclas Control + C

Copiar código
Dentro del cuadro anterior se puede ver el código empleado en los dos casos, para poder copiar el contenido usando dos identificadores y dos botones.
A diferencia del primer ejemplo, en este caso se agregó un ToolTip para que en los navegadores que no soporten "execCommand", salte la indicación de usar las teclas Control + C para copiar el texto seleccionado.
El metodo empleado se puede consultar viendo el código fuente de esta página.

Otras opciones de ClipBoard

ClipBoard también permite además de copiar, cortar texto, aunque lógicamente esto solo funciona en elementos textarea y en input.
Para usar la función es necesario agregar al elemento que desencadena la acción el atributo "data-clipboard-action" con el valor CUT.
Por ejemplo:

<button data-clipboard-action="cut" data-clipboard-target="#codigo">Cortar</button>

Otra opción es copiar un texto establecido como valor mediante el atributo "data-clipboard-text"
Por ejemplo:

<div data-clipboard-text="Texto a copiar">Copiar</div>

Ver en la consola del navegador los eventos

Para experimentar y probar la funcionalidad de diferentes elementos, podemos pasar a la consola del navegador los logs con la información que devuelven los eventos "success" y "error", de la siguiente forma.

var clipboard2 = new Clipboard('.bt1');
    clipboard2.on('success', function(e2) {
        console.log(e2);
    });
    clipboard2.on('error', function(e2) {
        console.log(e2);
    });  

Descargar ClipBoard.js

La última versión de clipboard.js se puede descargar desde la página del proyecto en Github.
Modificamos el archivo original para evitar tener que incluir código adicional en el HTML, al usar ClipBoard en cualquier página, como se muestra en el primero de los ejemplos.
El script modificado por mi y minimizado, se puede descargar desde el siguiente enlace: clipboard.min.js.