JavaScript : Copier-coller dans le presse-papier
Un tutoriel pour copier et coller le contenu d'un champ de saisie de texte HTML dans le presse-papier en utilisant l'API JavaScript Clipboard
Qu'est-ce que le presse-papier ?
En informatique, un presse-papier est une fonctionnalité qui permet de stocker des données que l'on souhaite dupliquer ou déplacer. Il utilise une mémoire tampon temporaire et peut contenir des informations de nature diverse : texte, fichier, ...
Nous voulons voir dans ce guide comment copier et coller le contenu d'un champ de saisie de texte en utilisant l'API Clipboard de JavaScript.
Pour ce faire, nous allons mettre en place un formulaire sur page HTML que nous allons rendre interactif avec les actions copier et coller dans le presse-papier en JavaScript.
Notez bien : l'Api Clipboard est conçu pour remplacer document.execCommand() précédemment utilisé pour accéder au presse-papiers.
Copier-coller en JavaScript
Pour faire fonctionner le système copier-coller en Javascript, nous avons besoin d'une page HTML pour présenter un formulaire <form> avec les éléments suivants :
- Un champ de texte
<textarea>: Le contrôle pour éditer du texte sur plusieurs lignes - Deux boutons
<button>: L'un pour copier le texte saisie dans<textarea>et l'autre pour coller le texte copié
Ce formulaire peut être décrit de la manière suivante dans une page HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Copier coller en Javascript</title>
</head>
<body>
<h1>Copier coller en Javascript</h1>
<!-- Le formulaire -->
<form id="form-copier-coller" >
<!-- champ de saisie de texte -->
<textarea id="texte" placeholder="Saisissez du texte ici" ></textarea><br />
<!-- Bouton copier -->
<button onclick="copierTexte(event)" >Copier le texte</button>
<!-- bouton coller -->
<button onclick="collerTexte(event)" >Coller le texte</button>
</form>
<!-- Le script JavaScript sera inséré ici -->
</body>
</html>Maintenant que nous avons un champ de saisie de texte avec les boutons d'action pour copier et coller le texte, rendons le formulaire interactif en ajoutant du JavaScript à la page.
Copier dans le presse-papier
Pour l'action copierTexte(), la logique que nous allons implémenter lorsqu'on clique sur le bouton copier le texte est la suivante :
- On vérifie si le champ de texte n'est pas vide
- On copie le texte dans le presse-papier en utilisant la méthode
clipboard.writeText() - On réinitialise le formulaire
- On lance une alerte pour informer que le texte est copié
Notez bien :
- La méthode
clipboard.writeText(), de même queclipboard.readText()que nous allons voir, retourne un objet Promise (Promesse) comme valeur. - Pour avoir accès à l'API Clipboard, une connexion sécurisée HTTPS est requise ou « localhost »
L'implémentation de l'action copier donne ce code JavaScript :
<script type="text/javascript">
// On sélectionne le formulaire
var form_copier_coller = document.getElementById("form-copier-coller")
// On sélectionne le <textarea>
var textarea_texte = document.getElementById("texte")
// Copier le texte
copierTexte = (e) => {
// On désactive l'action du formulaire
e.preventDefault()
// 1. Si le <textarea> n'est pas vide
if (textarea_texte.value.length) {
// 2. On copie le texte dans le presse-papier
navigator.clipboard.writeText(textarea_texte.value).then(() => {
// 3. On réinitialise le formulaire
form_copier_coller.reset()
// 4. On affiche l'alert
alert("Texte copié !")
})
} else {
alert("Veillez saisir le texte à copier")
}
}
// Coller le texte sera inséré ici
</script>Coller le texte copié
Pour l'action collerTexte(), nous lisons le contenu du presse-papier en utilisant la méthode clipboard.readText() puis on affecte ce contenu au champ textarea#texte :
// Coller le texte
collerTexte = (e) => {
e.preventDefault()
// On lit le contenu du clipboad qu'on affecte au <textarea>
navigator.clipboard.readText().then((texte) => {
textarea_texte.value = texte
})
}Notez bien : L'autorisation « clipboard-read » de l'API Permissions doit être accordée avant de pouvoir lire les données du presse-papiers.
La capture ci-dessous illustre la demande d'autorisation « clipboard-read » dans Google Chrome :
Portez-vous bien ! 😉
Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.
Wilo Ahadi, l'auteur
Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School
Voir profil
Commentaires