Copier le texte dans le presse-papiers en JavaScript
-
Copier le texte dans le presse-papiers en utilisant la méthode
Document.execCommand()en JavaScript -
Copier le texte dans le presse-papiers à l’aide de
Clipboard APIen JavaScript
De nos jours, de nombreux développeurs Web souhaitent implémenter une fonctionnalité sur leurs sites Web qui permettra à leurs utilisateurs de copier directement un tas de texte de leur site Web en un seul clic. Certains des exemples les plus couramment utilisés seraient la copie d’une commande de terminal ou d’extraits de code entiers à partir de n’importe quel site Web technique.
Voyons ce que nous entendons même par un presse-papiers et comment tout ce processus fonctionne même. Après cela, nous implémenterons cette copie dans la fonctionnalité de presse-papiers en JavaScript.
Tout ce qui est présent à l’intérieur de nos ordinateurs, comme les applications, les images, le texte, les fichiers, etc., est appelé données. Ainsi, chaque fois que nous essayons de copier quoi que ce soit présent à l’intérieur de notre ordinateur, notre ordinateur allouera une petite partie de la mémoire à nos données que nous avons copiées pour stocker ces données dans cet espace mémoire. Cela s’appelle un presse-papiers, et c’est ainsi que l’ordinateur se souvient des informations que vous avez copiées. Maintenant que nous avons les données stockées dans la mémoire, nous pouvons prendre ces données et les coller ou les utiliser autant de fois que nous le souhaitons.
Théoriquement, cela semble simple, mais en pratique, il est difficile à mettre en œuvre car il y a beaucoup de complexités impliquées. Mais ne vous inquiétez pas, en utilisant JavaScript, nous pouvons faire cela de manière beaucoup plus simple avec l’aide de la méthode Document.execCommand() et de l’API Clipboard.
Copier le texte dans le presse-papiers en utilisant la méthode Document.execCommand() en JavaScript
Il s’agit de la méthode la plus couramment utilisée pour interagir avec le presse-papiers. En utilisant cette méthode, vous pouvez effectuer les 3 opérations ci-dessous.
- Copiez le texte dans le presse-papiers en utilisant
Document.execCommand('copy') - Coupez le texte et ajoutez-le au presse-papiers en utilisant
Document.execCommand('cut') - Collez le contenu déjà présent dans le presse-papiers en utilisant
Document.execCommand('paste')
Notez que nous devons passer le paramètre de l’opération que nous voulons effectuer. Dans cet article, nous nous concentrerons uniquement sur l’opération de copie et non sur les autres. Prenons un exemple et comprenons cette opération de copie.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button onclick="copyToClipBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClipBoard() {
var content = document.getElementById('textArea');
content.select();
document.execCommand('copy');
alert('Copied!');
}
Tout d’abord, nous avons le fichier HTML avec un textarea contenant une chaîne et un bouton. Notre objectif ici est de copier le texte présent dans la zone de texte lorsque nous cliquons sur le bouton Copy. Deuxièmement, nous avons un fichier JS dans lequel nous avons une fonction appelée copyToClipBoard(). Cette fonction sera responsable de la copie du texte dans le presse-papiers.
Dans un premier temps, nous devons récupérer le textarea présent dans notre DOM en utilisant document.getElementById, et nous allons stocker cet élément dans la variable content. Nous avons maintenant le contenu de la textarea dans notre variable content. Pour copier le texte, il faut d’abord sélectionner tout le texte en utilisant la méthode select(). Ceci est similaire à la façon de sélectionner du texte à l’aide de notre souris.
En utilisant la méthode document.execCommand('copy'), nous allons copier le texte sélectionné, et nous montrerons une alerte à l’utilisateur pour lui faire savoir que le texte a été copié dans le presse-papiers.
Enfin, nous devons appeler la fonction copyToClipBoard() sur notre bouton Copy comme un événement onClick. Maintenant, si vous ouvrez cette page HTML sur votre navigateur, vous verrez les résultats finaux.
Copier le texte dans le presse-papiers à l’aide de Clipboard API en JavaScript
L’API Clipboard fournit des opérations de lecture et d’écriture asynchrones à l’aide desquelles vous pouvez copier et coller du contenu vers et depuis le presse-papiers. L’API Clipboard est disponible dans l’objet navigator.clipboard.
Cette API est un nouvel ajout au langage JavaScript, et tous les navigateurs ne pourront pas la prendre en charge, en particulier les anciens. Si vous souhaitez vérifier si votre navigateur prend en charge cette API ou non, vous pouvez utiliser le code ci-dessous.
if (!navigator.clipboard) {
// Clipboard API not available
return
}
Voyons comment utiliser l’API Clipboard pour copier du texte dans le presse-papiers.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button id="btn" onclick="copyToClickBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClickBoard() {
var content = document.getElementById('textArea').innerHTML;
navigator.clipboard.writeText(content)
.then(() => {console.log('Text copied to clipboard...')})
.catch(err => {
console.log('Something went wrong', err);
})
}
Le code ci-dessus est presque similaire au code que nous avons vu auparavant. La seule différence ici est que nous avons modifié la fonction copyToClickBoard(). Cette méthode sera appelée lorsque nous appuierons sur le bouton Copy. A l’intérieur de cette fonction, nous récupérons d’abord le texte présent dans la zone textarea en utilisant la propriété innerHTML et en stockant ce texte dans la variable content.
L’objet navigator.clipboard a deux méthodes. L’une est la méthode writeText() utilisée pour copier le texte dans le presse-papiers, et une autre est la méthode readText() qui sera utilisée pour lire le texte présent dans le presse-papiers en le collant. Ici, nous nous intéressons uniquement à la méthode writeText().
A l’intérieur de cette méthode, nous devons passer la variable content, qui contient actuellement tout le texte au format chaîne. Après cela, cette méthode prendra le texte et le copiera dans le presse-papiers. Si cela réussit, nous afficherons un message Text copied to clipboard... sinon nous lancerons un message d’erreur en fonction du type d’erreur qui s’est produite.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn