Le couper-coller de texte est l'une des fonctionnalités les plus couramment utilisées dans les applications en général et les applications de bureau en particulier. Comment copier du texte sur le Web ? Il existe une ancienne et une nouvelle. Tout dépend du navigateur utilisé.
Méthode moderne
Utiliser l'API Async Clipboard
La méthode Clipboard.writeText() prend une chaîne et renvoie une promesse qui se résout lorsque le texte est correctement écrit dans le presse-papiers. Clipboard.writeText() ne peut être utilisé qu'à partir de l'objet window sélectionné.
Méthode classique
Utiliser document.execCommand()
L'appel de document.execCommand('copy') renvoie une valeur booléenne indiquant si la copie a réussi. Appelez cette commande dans un geste de l'utilisateur, par exemple un gestionnaire de clics. Cette approche présente des limites par rapport à l'API Async Clipboard. La méthode execCommand() ne fonctionne qu'avec des éléments DOM. Comme cette opération est synchrone, la copie de grandes quantités de données, en particulier celles qui doivent être transformées ou nettoyées d'une manière ou d'une autre, peut bloquer la page.
amélioration progressive
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);
});
}
Complément d'informations
- Débloquer l'accès au presse-papiers (méthode moderne)
- les commandes "Couper et copier" (méthode classique) ;
Démonstration
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);
}
});