Cómo copiar, cortar y pegar contenidos en el portapapeles con JavaScript

El navegador Internet Explorer 10 fue el primero que añadió soporte para "copiar y pegar" contenidos mediante el método Document.execCommand() de JavaScript. El resto de navegadores también han añadido soporte para esta funcionalidad, como por ejemplo Google Chrome, que lo soporta desde la versión 43.

Gracias a esta funcionalidad, cualquier texto seleccionado en el navegador se puede cortar o copiar en el portapapeles. Combinándola con otras técnicas, como la API Selection de JavaScript, puedes crear un botón llamado Copiar para copiar al portapapeles cualquier contenido de una página.

Un ejemplo sencillo

Para empezar con un ejemplo sencillo, vamos a crear un botón que copia una dirección de correo electrónico en el portapapeles. Para ello, crea primero los elementos HTML que muestran el email y el botón:

<p>
    Envíame un mensaje a
    <a class="email" href="mailto:[email protected]">[email protected]</a>
</p>

<button class="botonCopiar">Copiar</button>

A continuación añadimos el código JavaScript que responde cuando se pulsa el botón, selecciona la dirección de email y la copia en el portapapeles:

var boton = document.querySelector('.botonCopiar');

boton.addEventListener('click', function(event) {
  // seleccionar el texto de la dirección de email
  var email = document.querySelector('.email');
  var range = document.createRange();
  range.selectNode(email);
  window.getSelection().addRange(range);

  try {
    // intentar copiar el contenido seleccionado
    var resultado = document.execCommand('copy');
    console.log(resultado ? 'Email copiado' : 'No se pudo copiar el email');
  } catch(err) {
    console.log('ERROR al intentar copiar el email');
  }

  // eliminar el texto seleccionado
  window.getSelection().removeAllRanges();
  // cuando los navegadores lo soporten, habría
  // que utilizar: removeRange(range)
});

En primer lugar, el código anterior utiliza la API Selection a través del método window.getSelection() para seleccionar el texto que se va a copiar. Después se ejecuta el método document.execCommand() para copiar los contenidos en el portapapeles. Por último, el método removeAllRanges() hace que el texto del email no se quede seleccionado después de copiarlo.

Para asegurarte de que el texto se ha copiado, puedes utilizar el valor devuelto por el método document.execCommand(), que devuelve false si el navegador no soporta este método o si el usuario no permite usarlo. Como además este método puede fallar en algunas circunstancias especiales, se encierra todo el código en un bloque try ... catch para capturar los posibles errores..

Además del comando copy, puedes usar el comando cut para cortar texto de algún campo de formulario y pasarlo al portapapeles. En el siguiente ejemplo se muestra un <textarea> con cierto contenido que se va a cortar:

<textarea class="contenido">Hola Mundo</textarea>

<button class="botonCortar" disable>Cortar texto</button>

El siguiente código muestra cómo cortar el texto con JavaScript:

var botonCortar = document.querySelector('.botonCortar');

botonCortar.addEventListener('click', function(event) {
  var contenido = document.querySelector('.contenido');
  contenido.select();

  try {
    var resultado = document.execCommand('cut');
    console.log(resultado ? 'Contenido cortado' : 'No se pudo cortar el contenido');
  } catch(err) {
    console.log('ERROR al intentar cortar el contenido');
  }
});

Comprobando si el navegador soporta los comandos de copiar y pegar

Antes de ejecutar el comando document.execCommand() es aconsejable comprobar si el navegador soporta esta API. Para ello, usa el método document.queryCommandSupported(). Gracias a este método, en el ejemplo anterior puedes hacer que el botón esté deshabilitado cuando el navegador no permite copiar contenidos:

botonCopiar.disabled = !document.queryCommandSupported('copy');

La diferencia entre document.queryCommandSupported() y document.queryCommandEnabled() es que el primero comprueba si el navegador soporta los métodos copy y cut, mientras que el segundo comprueba si están habilitados (para ello por ejemplo debe haberse seleccionado algún texto previamente).

Este segundo método es útil cuando no seleccionas el texto mediante JavaScript sino que dejas que sea el usuario el que seleccione el texto. En este caso sí que puede ser útil dejar el botón deshabilitado hasta que no se haya seleccionado algo.

Soporte en navegadores

Los comandos para copiar y cortar contenidos están soportados desde las siguientes versiones de los principales navegadores:

Sobre el autor

Este artículo fue publicado originalmente por Matt Gaunt y ha sido traducido con permiso por Javier Eguiluz.