Cómo copiar texto

Joe Medley
Joe Medley
Twitter GitHub

Cortar y pegar texto es una de las funciones más usadas de las aplicaciones en general y de las aplicaciones de escritorio en particular. ¿Cómo copio texto en la Web? Hay un viejo modo y otro nuevo. Además, depende del navegador que se use.

La forma moderna

Usa la API de Async Clipboard

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

Navegadores compatibles

  • 66
  • 79
  • 63
  • 13.1

Origen

La forma clásica

Usa document.execCommand()

Llamar a document.execCommand('copy') 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 del DOM. Debido a que es síncrono, la copia de grandes cantidades de datos, especialmente datos que se deben transformar o limpiar de alguna manera, puede bloquear la página.

Navegadores compatibles

  • 1
  • 12
  • 1
  • 1.3

Origen

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);
  }
});