Ver

En esta entrada veremos cómo copiar un texto que esté establecido en nuestro HTML en nuestro portapapeles empleando JavaScript sin necesidad de emplear Flash o alguna tecnologías de un tercero.

El portapapeles no es más que una herramienta del sistema operativo que permite almacenar datos como textos e imágenes.

Se accede al portapapeles generalmente empleando la combinación Ctrl + C para copiar y Ctrl + V para pegar.

Crearemos una sencilla función cuyo núcleo es el método llamado execCommand que permite ejecutar comandos al documento actual con la selección actual, esto puede sonar algo enredado pero en realidad es bastante fácil la función.

Con lo dicho anteriormente, y para que pueda funcionar debemos tener un campo de texto oculto u otro que nos permita crear un campo de selección el cual es el campo selección actual que emplearemos para vaciar el texto que queramos copiar en el portapapeles que luego será copiado mediante el método execCommand con el parámetro "copy"; sin ir más lejos la función:

function copiar(id_elemento) {

// Crea un campo de texto "oculto"
var aux = document.createElement("input");

// Asigna el contenido del elemento especificado al valor del campo
aux.setAttribute("value", document.getElementById(id_elemento).innerHTML);

// Añade el campo a la página
document.body.appendChild(aux);

// Selecciona el contenido del campo
aux.select();

// Copia el texto seleccionado
document.execCommand("copy");

// Elimina el campo de la página
document.body.removeChild(aux);

console.log("texto copiado")
}

Puedes darle un buen uso al script anterior creando un campo de texto con contenido editable como hemos visto anteriormente en: Secciones editables en el HTML con el atributo contenteditable.

Soporte de los navegadores

Antes de emplear el comando document.execCommand("copy"); es de buena práctica comprobar soporte en el navegador; para ello empleamos el siguiente comando:

document.queryCommandSupported('copy');

Navegador	Versión
Internet Explorer	10+
Google Chrome	43+
Firefox	41+
Opera	29+
Safari	(sin soporte)

Puedes consultar el experimento original aqui Copiar el contenido de un elemento al portapapeles usando JavaScript

Ver