Tuto Javascript

Presse papier Javascript

À quoi sert presse papier en Javascript? Et Comment interagir avec le presse papier sur une page web avec Javascript? Il s'agit d'utiliser la fonctionnalité copier-coller côté navigateur afin de garder en mémoire du contenu de type texte et pouvoir ensuite recoller cette portion de texte à l'endroit voulu. Concrètement voici un exemple ou l'on copie le texte présent dans une DIV grâce à un bouton qui vas exécuter la commande Javascript souhaitée. Comment utiliser le presse papier en Javascript? Le presse papier peut être utilisé grâce à la fonction navigator.clipboard.writeText(). Dans l'exemple ci bas fonction prend en paramètre le contenu présent dans la DIV ayant pour ID "textacopier".

Exemple d'utilisation du presse-papier en Javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Presse papier</title>
    </head>
    <body>
        <div id="textacopier">Texte à copier</div>
        <button onclick="lanceLaCopie()" type="button">Copier le texte</button>
        <script>
            function lanceLaCopie() {
                var textCopy = document.getElementById("textacopier").innerHTML;
                navigator.clipboard.writeText(textCopy).then(() => {
                    alert("le texte: \"" + textCopy + "\" a bien été copié");
                });
            }
        </script>
    </body>
</html>