Copier dans le presse-papier en JavaScript

Also available in: English

Vous avez certainement connu ces boutons pour « Copier dans le presse-papier » utilisant pirouette en Flash pour passer outre un blocage de sécurité de nos navigateurs ? Avec l’évolution des API en JS et l’écoute de la demande des développeurs, il est possible depuis maintenant quelques temps de le faire en JS, nativement.

La technique est relativement simple puisqu’elle consiste en l’exploitation de la fonction execCommand() disponible au niveau du document.

Qu’est-ce que execCommand()

La fonction execCommand() se présente ainsi :

document.execCommand( commandName, showDefaultUI, valueArgument );

où les paramètres représentent :

• commandName :
  le nom d’une commande à exécuter (copy, paste, undo, redo, insertHTML, etc.)
• showDefaultUI :
  true ou false, pour afficher ou non l’interface par défaut (pas supporté par Mozilla actuellement)
• valueArgument :
  pour les commandes qui ont besoin d’un argument supplémentaire, comme par exemple la commande insertImage qui attend une URL en valeur.

Elle permet comme son nom l’indique d’exécuter une commande dans la fenêtre courante. Pour une documentation plus complète, l’article du MDN est une bonne ressource.

Exemple de code

Je vais aller au plus simple pour ce code JS, je vous laisserai cliquer sur le lien de la démo (qui contient le code également) un peu plus bas si vous voulez un exemple plus complet d’implémentation.

Imaginons ce code HTML :

<textarea id="to-copy">Write something and copy it into your clipboard by clicking in the button below.</textarea>

<button id="copy" type="button">Copy in clipboard</button>

Le code JavaScript suivant, très sommaire, permet déjà de placer dans votre presse-papier le contenu du textarea. Vous pouvez ensuite coller ce contenu où bon vous semble. (autre champ, document, etc.)

var toCopy  = document.getElementById( 'to-copy' ),
    btnCopy = document.getElementById( 'copy' );

btnCopy.addEventListener( 'click', function(){
	toCopy.select();
	document.execCommand( 'copy' );
	return false;
} );

Lorsque document.execCommand() s’est bien exécutée, elle retourne true, à l’inverse si ça s’est mal passé (pas de support ou erreur) elle retourne false.
Je vous laisse imaginer ce qu’il est possible de faire avec du coup. D’ailleurs en voici un exemple :

Démo sur CodePen

N’hésitez pas à partager votre code sur CodePen et dans les commentaires pour nous montrer ce que vous avez fait avec cette idée.

La micro bibliothèque Clipboard.js peut vous aider à améliorer vos développements. Allez jeter un oeil à Clipboard.js

Amusez-vous bien !