Imagen destacada del artículo Cómo copiar texto al portapapeles con javascript

Cómo copiar texto al portapapeles con javascript

javascript svg
actualizado: 27 / 10 / 2022

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 https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard#browser_compatibility

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.

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

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.
js
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")