Cómo copiar texto al portapapeles con javascript

Actualizado : 2023-10-01

¿Alguna vez has deseado tener un botón mágico que copie texto al portapapeles en tu sitio web? ¡Estás en el lugar correcto! En este artículo, aprenderás a usar JavaScript para copiar texto al portapapeles.

Desde cómo usar las funciones básicas hasta la creación de un botón html que copia al hacer click en el.

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.

const copyToClipboard = async str => {
  try {
    await navigator.clipboard.writeText(str);
    console.log("copied");
  } catch (error) {
    console.log(error);
  }
};

La función llamada copyToClipboard que toma una cadena str como argumento y usa el API del portapapeles (navigator.clipboard.writeText) para copiar esa cadena al portapapeles.

Si se completa la operación correctamente, escribirá el valor del argumento str en el portapapeles e imprimirá "copied" en la consola, y si hay algún error, lo registrará en la consola.

Ten en cuenta que este código asume que estás ejecutándolo en un entorno que admite el API del portapapeles, como un navegador web moderno.

En algunos entornos (por ejemplo, entornos de servidor), el API del portapapeles puede no estar disponible, por lo que debes tener cuidado al usar esta función en diferentes contextos como en aplicaciones de next, gatsby o qwik.

Ejemplo de copiar al portapapeles en javascript a través de un boton

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 registrar un valor en el portapapeles.

El valor a copiar puede ser el texto de un elemento o el value de un input, así cuando se dispare el evento de click también se copiará el elemento al portapapeles, veamos un ejemplo:

html

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</blockquote>

<button id="buttonCopy">copy</button>

const button = document.getElementById("buttonCopy");
const quote = document.getElementById("quote");

const copyToClipboard = async str => {
  try {
    await navigator.clipboard.writeText(str);
    console.log("copied");
  } catch (error) {
    console.log(error);
  }
};

button.addEventListener("click", () => {
  copyToClipboard(quote.textContent);
});

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 la implementación anterior. Puedes utilizar Document.execCommand('copy') para lograr el mismo resultado.

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

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


function copyToClipboard(text) {
    //Paso 1
    const textArea = document.createElement("textarea");
    textArea.value = text;

    // Añadir el elemento al DOM
    document.body.appendChild(textArea);

    // Seleccionar el texto en el textarea
    textArea.select();

    try {
      // Copiar el texto al portapapeles
      document.execCommand("copy");
      console.log("Copiado al portapapeles");
    } catch (err) {
      console.error("No se pudo copiar al portapapeles:", err);
    }

    // Eliminar el textarea del DOM
    document.body.removeChild(textArea);
}

Impletación de un boton para copiar texto al portapapeles con el método execCommand

html

<blockquote id="quote">
  consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
</blockquote>

<button id="buttonCopy">copy</button>

const button = document.getElementById("buttonCopy");
const quote = document.getElementById("quote");

function copyToClipboard(text) {
  const textArea = document.createElement("textarea");
  textArea.value = text;

  // Añadir el elemento al DOM
  document.body.appendChild(textArea);

  // Seleccionar el texto en el textarea
  textArea.select();

  try {
    // Copiar el texto al portapapeles
    document.execCommand("copy");
    console.log("Copiado al portapapeles");
  } catch (err) {
    console.error("No se pudo copiar al portapapeles:", err);
  }

  // Eliminar el textarea del DOM
  document.body.removeChild(textArea);
}

button.addEventListener("click", () => {
  copyToClipboard(quote.textContent);
});

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

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

Ver ambos ejemplos en funcionamiento

Experimenta con estas técnicas y agrega la capacidad de copiar al portapapeles en tus proyectos web para hacerlos aún más útiles y amigables para el usuario. ¡Tus visitantes lo agradecerán!

Si te ha resultado útil este artículo, ¡compártelo con otros desarrolladores para que también puedan aprovechar esta valiosa función de JavaScript!

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi