Copiar al portapapeles

Enfoque práctico de cómo copiar texto dentro de un elemento HTML al portapapeles con un solo clic usando JavaScript

Ofrecer la posibilidad de poder copiar texto al portapapeles es una funcionalidad muy común en las aplicaciones web y puede mejorar sustancialmente la experiencia de usuario de tus visitantes. Vamos a explorar cómo implementarla de manera efectiva.

Copiar al portapapeles con la API Clipboard

En JavaScript, hay varias formas de copiar texto al portapapeles. Pero la API Clipboard es la recomendada. Veamos un ejemplo donde se copia el texto que está dentro de un elemento div de HTML:

<div id="textToCopy">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<button id="copyButton" onclick="copyText()">Copiar</button>

function copyText() {
  // Texto a copiar
  const textToCopy = document.getElementById("textToCopy").innerText;

  // Usamos la API de Portapapeles para copiar el texto
  navigator.clipboard.writeText(textToCopy).then(function () {
    // Cambiar el texto del botón y deshabilitar el botón
    document.getElementById("copyButton").innerText = "✓ Copiado";
    document.getElementById("copyButton").disabled = true;

    // Dejar el botón como en el estado inicial al cabo de 2 segundos
    setTimeout(function () {
      document.getElementById("copyButton").innerText = "Copiar";
      document.getElementById("copyButton").disabled = false;
    }, 2000);
  }).catch(function (err) {
    console.error('Imposible copiar el texto', err);
  });
}

Para ver el código completo puedes mirar aquí, aunque avisamos que este ejemplo no funciona en esta página debido a que está en un iframe. Tendrías que ejecutarlo en otro entorno.

Compatibilidad con navegadores de la API Clipboard

Esta API es relativamente nueva y aunque la soportan todos los navegadores modernos recomendamos mirar la tabla de compatibilidad de los navegadores.

Para copiar al portapapeles históricamente se utilizaba la instrucción document.execCommand('copy'). Pero a día de hoy, este método se ha declarado obsoleto y se recomienda no usarlo.