DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
21-09-2017
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

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Árbol arcoíris creciente

Árbol arcoíris creciente

anime.js librería para animaciones en JavaScript

anime.js librería para animaciones en JavaScript

Circunferencia animada con Canvas

Circunferencia animada con Canvas

Algunos artículos que te pueden interesar

Comenzando con Adobe PhoneGap en Windows y Android

Comenzando con Adobe PhoneGap en Windows y Android

Se explica como instalar Adobe PhoneGap en Windows y Android además de crear un proyecto y configurarlo en la aplicación móvil.

Andrés Cruz 27-01-2017

Dibujando puntos al azar con Canvas

Dibujando puntos al azar con Canvas

En este artículo dibujaremos un montón de esferas cuyas posiciones son al azar a través de un Canvas.

Andrés Cruz 11-04-2014

Introducción a las notificaciones en JavaScript

Introducción a las notificaciones en JavaScript

En HTML5 podemos emplear el objeto Notification (notificación) para configurar y mostrar mensajes informativos al usuario.

Andrés Cruz 09-02-2015