Cómo copiar texto al portapapeles con javascript

Una necesidad que muchas veces queremos cubrir en algunos sitios web es la capacidad de poder copiar texto al portapapeles de forma dinámica y con solo un click.

Usando la API asíncrona del portapapeles navigator.clipboard

Esta api ya está disponible desde hace algún tiempo, si no necesitas compatibilidad con versiones antiguas de navegadores esta api es la forma más fácil y segura de copiar contenido al portapapeles desde la web.

Revisa la compatibilidad de la api navigator.clipboard con las diferentes versiones de navegadores en este enlace Api Navigator MDN

Para asegurarte de que todo funciona correctamente antes debes asegurarte de que la api existe en el navegador y una vez comprobado llamar al método clipboard.writeText() para copiar este contenido en el portapapeles

En caso de no existir puedes lanzar un Promise.reject para rechazar de inmediato y mantener el tipo de devolución consistente.

Copiarjs
const copyToClipboard = str => {
  if (navigator && navigator.clipboard && navigator.clipboard.writeText)
    return navigator.clipboard.writeText(str);
  return Promise.reject("The Clipboard API is not available.");
};

¿Cómo implementarlo?

Una forma en la que puedes implementar la función anterior para copiar el string en el portapapeles es escuchar un evento de click y recoger un valor.

puede ser el texto de un elemento o el value de un input y este valor pasarsela a esta función, así cuando se dispare el evento de click también se copiará el elemento al portapapeles

Copiar al portapapeles con Document.execCommand('copy')

En caso de que la opción anterior no sea la adecuada para ti ya sea porque tu público objetivo usa frecuentemente navegadores antiguos o no entiendes cómo usar del todo navigator.clipboard puedes utilizar Document.execCommand('copy') para lograr el mismo resultado.

Paso a paso para copiar al portapapeles con Document.execCommand desde JavaScript

1. Cree un elemento textarea para agregarlo al documento.
2. Agrega el valor que deseas copiar.
3. Agregue el textarea al documento HTML actual y use CSS para ocultarlo y evitar que parpadee.
4. Con HTMLInputElement.select() seleccionamos el contenido del textarea.
5. Ahora con Document.execCommand('copy') logramos copiar el contenido del textarea al portapapeles.
6. Eliminar el textarea del documento.

Copiarjs
const copyToClipboard = str => {
  // PASO 1
  const el = document.createElement("textarea");
  // PASO 2
  el.value = str;
  el.setAttribute("readonly", "");
  // PASO 3
  el.style.position = "absolute";
  el.style.left = "-9999px";
  document.body.appendChild(el);
  // PASO 4
  el.select();
  // PASO 5
  document.execCommand("copy");
  // PASO 6
  document.body.removeChild(el);
};

Debes tener en cuenta que esto solo responderá ante una acción del usuario (por ejemplo con un evento de click) por temas internos del funcionamiento de este método.

Aprende más de Document.execCommand("copy")