Liker
Discuter
Partager
Offrir
Youtube

JavaScript : Copier-coller dans le presse-papier

Mis à jour il y a 2 semaines

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

Wilo Ahadi

Auteur

Wilo A.

Technologies

HTML, JavaScript

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 :

  1. On vérifie si le champ de texte n'est pas vide
  2. On copie le texte dans le presse-papier en utilisant la méthode clipboard.writeText()
  3. On réinitialise le formulaire
  4. On lance une alerte pour informer que le texte est copié

Notez bien :

  1. La méthode clipboard.writeText(), de même que clipboard.readText() que nous allons voir, retourne un objet Promise (Promesse) comme valeur.
  2. 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 :

Demande d'autorisation de l'API Clipboard au presse-papier

Portez-vous bien ! 😉

Cette publication vous a plu ?
Encouragez-nous en la partageant sur les réseaux sociaux

Wilo Ahadi
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 Suivre

Commentaires