Copier le contenu d’un élément dans le presse-papier

Lorsque l’on a un élément qui contient des informations à recopier, on peut proposer à l’utilisateur un bouton Copier qui permet de faire un copier dans le presse-papier (clipboard) du contenu de l’élément. Cela facilite la tâche qui consiste à sélectionner le texte et de le copier soit avec le clic droit de la souris en choisissant copier, soit avec le raccourci Ctrl+C.

Bouton Copier
Bouton Copier

Principe du bouton Copier :

  • Créer une zone de saisie textarea,
  • Copier le contenu de l’élément à l’intérieur de la zone de saisie,
  • Sélectionner le contenu avec select(),
  • Copier dans le presse-papier avec document.execCommand( ‘copy’ ),
  • Supprimer la zone de saisie.

Cela se fait tellement vite, l’utilisateur ne voit pas la zone de saisie. On ne peut pas cacher cette zone, sinon le texte n’est pas sélectionné. On peut éventuellement déplacer la zone hors du viewport (visibilité de la fenêtre), en position absolue et éloignée.

La dernière ligne remplace le bouton par le texte «Copié».

Et hop, un joli bouton pour aider l’utilisateur à copier un contenu.

3 Commentaires

  1. Bonjour et merci pour ce truc, c’est exactement ce qu’il me faut et que je cherche depuis quelques jours……….. mais ça ne marche pas !!!!

    Je dois faire une erreur quelque part mais ne sais où. Alors est-ce que vous pourriez, svp, m’envoyer la procédure exacte ? Que je puisse comparer et voir d’où vient mon erreur. Si oui, d’avance un grand merci.

    Alain M.

    Répondre
  2. À priori, cela marche bien. Peut-être y a-t-il une erreur sur le nom des éléments.

    $monBouton est la variable qui contient votre bouton, par exemple
    var $monBouton = $( '#bouton' ) 
    et le contenu est l’élément avec l’id monContenu .

    En espérant que cela vous aide.

    Répondre
  3. Quand on ne connait pas le javascipt ce n’est pas très pratique d’avoir qu’un bout de code.
    Un mini bout de programme complet avec bouton et exemple sur une page aurait été plus pratique.
    Dommage, je vais chercher ailleurs.

    Répondre

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *