Acceder al portapapeles con Javascript

En este artículo vamos a enseñarte como utilizar unos cuantos snippets de vanilla Javascipt para:

  • Añadir texto al portapapeles mediante una acción del usuario, como puede ser presionar un botón
  • Modificar el contenido del portapapeles cuando un usuario copia algo

La API que utilizaremos no requiere de librerías externas, y es soportada por la mayoría de los navegadores modernos. ¡Son todo ventajas!

Copiar al hacer click

Una gran favor a la accesibilidad de tu sitio web es añadirle la habilidad de copiar cadenas directamente al presionar un botón. Esta interacción puede almacenar urls, cadenas largas como claves SSH, comandos de terminal, códigos hexadecimales de color y otros datos que son susceptibles de ser copiados y pegados.

Para que esto suceda tendremos que utilizar un método de Javascript llamada execCommand(). Nos permite invocar una serie de diferentes eventos que manipulan el contenido editable tales como poner el texto en negrita o cursiva, deshacer/rehacer e incluso copiar/cortar/pegar.

document.execCommand('copy');

Esto funciona de la misma manera que cuando presionamos CTRL/Cmd+C en el teclado. Ni que decir tiene, que para ejecutar esto, primero tenemos que tener seleccionado el texto. Esto es posible en Javascript gracias a la Selection API, que nos permite hacer una selección de texto en cualquier elemento HTML de la página.

var button = document.getElementById("copy-button"),
    contentHolder = document.getElementById("content-holder");

button.addEventListener("click", function() {

    // We will need a range object and a selection.
    var range = document.createRange(),
        selection = window.getSelection();

    // Clear selection from any previous data.
    selection.removeAllRanges();

    // Make the range select the entire content of the contentHolder paragraph.
    range.selectNodeContents(contentHolder);

    // Add that range to the selection.
    selection.addRange(range);

    // Copy the selection to clipboard.
    document.execCommand('copy');

    // Clear selection if you want to.
    selection.removeAllRanges();

}, false);

Si has ejecutado este código en tu proyecto, verás que el código que queremos copiar está almacenado simplemente en un párrafo. Si el texto que necesitas no está en la página, debes primero escribir en cualquier elemento hidden off-screen.

Modificar texto copiado

Aquí te mostraremos cómo manipular contenido del portapapeles después de que se haya copiado. Esto puede ser muy útil para escapar de código, formatear números y fechas, y para otras transformaciones de texto tales como poner en mayúscula, poner en minúscula, etc...

Javascript nos proporciona los eventos copy() y paste(), pero están diseñados de tal manera para que el contenido almacenado en el portapapeles sea seguro:

En el controlador de evento de copia no podemos leer lo que está almacenado en el portapapeles, ya que puede ser que haya información personal, a la cual no deberíamos acceder. Lo que si podemos hacer es sobreescribir dichos datos.
El caso de pegar es totalmente distinto, podemos leer los datos, pero no podemos modificarlos.

Dado que queremos leer y escribir al mismo tiempo, tendremos que utilizar la Selection API una vez más. Esta sería la solución:

document.addEventListener('copy', function(e){

    // We need to prevent the default copy functionality,
    // otherwise it would just copy the selection as usual.
    e.preventDefault();

    // The copy event doesn't give us access to the clipboard data,
    // so we need to get the user selection via the Selection API.
    var selection = window.getSelection().toString();

    // Transform the selection in any way we want.
    // In this example we will escape HTML code.
    var escaped = escapeHTML(selection);

    // Place the transformed text in the clipboard. 
    e.clipboardData.setData('text/plain', escaped);

});

De todas maneras, si necesitas más control sobre los eventos de copiar/pegar/cortar, puedes utilizar una librería como clipboard.js. Cuenta con un montón de características y te proporciona una buena API limpia para gestionar el portapapeles.

¡Espero que hayas disfrutado de este artículo! No dudes en preguntarnso tus dudas o dejar tus sugerencias en la sección de comentarios :)

Fuente: tutorialzine.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.