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

Eye Candy

Eye Candy

Circunferencia animada con Canvas

Circunferencia animada con Canvas

Wave World con Canvas

Wave World con Canvas

Algunos artículos que te pueden interesar

La API de FullSreen en JavaScript

La API de FullSreen en JavaScript

La API de FullScreen permite presentar una página web o los distintos elementos que forman la misma en pantalla completa o FullScreen.

Andrés Cruz 23-03-2015

El secreto de las animaciones en JavaScript (requestAnimationFrame())

El secreto de las animaciones en JavaScript (requestAnimationFrame())

En esta entrada veremos cómo realizar algunas simples animaciones en JavaScript mediante requestAnimationFrame() cuya API se encuentra integrada con Canvas.

Andrés Cruz 21-07-2015

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