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.
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.
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
- Cómo desbloquear el acceso al portapapeles (la forma moderna)
- Comandos para cortar y copiar (la forma clásica)
Demostración
<!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>
: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;
}
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);
}
});