Cómo copiar texto

Joe Medley
Joe Medley
GitHub

Cortar y pegar texto es una de las funciones de uso frecuente de las apps en general y de las aplicaciones de escritorio en particular. ¿Cómo copio texto en la Web? Hay una forma antigua y una nueva. Además, depende del navegador que se use.

La forma moderna

Usa la API de Async Clipboard

El método Clipboard.writeText() toma una cadena y muestra una promesa que se resuelve cuando el texto se escribe correctamente en el portapapeles. Clipboard.writeText() solo se puede usar desde el objeto window que tiene el enfoque.

Browser Support

  • Chrome: 66.
  • Edge: 79.
  • Firefox: 63.
  • Safari: 13.1.

Source

La forma clásica

Usa document.execCommand()

Si llamas a document.execCommand('copy'), se muestra un valor booleano que indica si la copia se realizó correctamente. Llama a este comando dentro de un gesto del usuario, como un controlador de clics. Este enfoque tiene limitaciones en comparación con la API de Async Clipboard. El método execCommand() solo funciona con elementos DOM. Debido a que es síncrono, copiar grandes cantidades de datos, en especial datos que deben transformarse o desinfectarse de alguna manera, puede bloquear la página.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 69.
  • Safari: 1.3.

Source

Mejora progresiva

const copyButton = document.querySelector('#copyButton');
const out = document.querySelector('#out');

if ('clipboard' in navigator) {
  copyButton.addEventListener('click', () => {
    navigator.clipboard.writeText(out.value)
    .then(() => {
      console.log('Text copied');
    })
    .catch((err) => console.error(err.name, err.message));
  });
} else {
  copyButton.addEventListener('click', () => {
    const textArea = document.createElement('textarea');
    textArea.value = out.value;
    textArea.style.opacity = 0;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      const success = document.execCommand('copy');
      console.log(`Text copy was ${success ? 'successful' : 'unsuccessful'}.`);
    } catch (err) {
      console.error(err.name, err.message);
    }
    document.body.removeChild(textArea);
  });
}

Lecturas adicionales

Demostración

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to copy text</title>
  </head>
  <body>
    <h1>How to copy text</h1>
    <textarea rows="3">
Some sample text for you to copy. Feel free to edit this.</textarea
    >
    <button type="button">Copy</button>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

button {
  display: block;
}

JS


        const textarea = document.querySelector('textarea');
const button = document.querySelector('button');

button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(textarea.value);
  } catch (err) {
    console.error(err.name, err.message);
  }
});