Taglia e incolla il testo è una delle funzionalità più utilizzate dalle app in generale e dalle applicazioni desktop in particolare. Come faccio a copiare testo sul Web? C'è un vecchio modo e un nuovo modo. Dipende dal browser utilizzato.
Il modo moderno
Utilizzo dell'API Async Clipboard
Il metodo Clipboard.writeText() accetta una stringa e restituisce una Promessa che si risolve quando il testo viene scritto correttamente negli appunti. Clipboard.writeText() può essere utilizzato solo dall'oggetto window impostato come attivo.
Il classico
In uso: document.execCommand()
La chiamata a document.execCommand('copy') restituisce un valore booleano che indica se la copia è riuscita. Richiama questo comando all'interno di un gesto dell'utente, ad esempio un gestore dei clic. Questo approccio presenta limitazioni rispetto all'API Async Clipboard. Il metodo execCommand() funziona solo con gli elementi DOM. Poiché è sincrono, la copia di grandi quantità di dati, in particolare quelli che devono in qualche modo essere trasformati o bonificati, può bloccare la pagina.
Miglioramento progressivo
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);
});
}
Per approfondire
- Sbloccare l'accesso agli appunti (il modo moderno)
- Comandi Taglia e copia (opzione classica)
Demo
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);
}
});