Cómo copiar contenidos en el portapapeles con JavaScript

21-09-2017 - Andrés Cruz

Cómo copiar contenidos en el portapapeles con JavaScript In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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');
NavegadorVersión
Internet Explorer10+
Google Chrome43+
Firefox41+
Opera29+
Safari(sin soporte)

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

Ver


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!