Copy to clipboard ?
Cette semaine, j’ai dû trouver le moyen de proposer un lien permettant de copier du texte dans le presse-papier dans une page HTML. On dirait pas comme ça, mais c’est pas évident et dans certains cas, ça peut être intéressant ! Après quelques heures de recherche en parcourant les pages de notre ami Google, j’ai pu finalement trouver une solution pour Internet Explorer et Firefox, mais pas pour les autres navigateurs. Voici donc le résultat de ma recherche…
Internet Explorer
Pour IE, j’ai trouvé principalement deux méthodes, avec quelques variantes. J’ai une nette préférence pour la première qui me paraît plus simple d’utilisation.
Méthode 1
La première méthode consiste à utiliser l’objet clipboardData disponible dans l’objet window depuis Internet Explorer 5. Cet objet permet d’interagir avec le presse-papier pour y copier ou y lire des données.
clipboardData possède entre autres la méthode setData(sDataFormat, sData) qui permet d’enregistrer un contenu dans le presse papier. Le paramètre sDataFormat peut prendre plusieurs valeurs, dont “Text” pour manipuler une chaine de caractères ; ce paramètre n’est pas sensible à la casse.
Pour plus d’information sur l’objet clipboardData, je vous renvoie à sa documentation.
On peut donc écrire une petite fonction permettant la copie d’un texte dans le presse-papier de la façon suivante :
Code (JavaScript)
function copyToClipboardIE1(sText)
{
// Le contenu actuel du presse-papier sera écrasé par la valeur de sText.
window.clipboardData.setData('Text', sText);
// On ne veut pas suivre le lien après le clic.
return false;
}
Elle peut être appelée via un lien du type :
Code (HTML)
<a onclick="return copyToClipboardIE1('Texte à copier.');" href="#">
Copier dans le presse-papier
</a>
Méthode 2
La seconde solution que j’ai trouvée consiste à exploiter un champ de formulaire afin de créer un objet de type TextRange qui possède la méthode execCommand(sCommand) qui permet d’exécuter une commande ; par exemple la commande “Copy” permettra de copier le contenu de l’objet dans le presse-papier [Plus d'informations].
L’objet TextRange peut être créé à partir du champ de formulaire grâce à la méthode createTextRange() [Plus d'informations].
La fonction de copie peut alors s’écrire comme ça :
Code (JavaScript)
function copyToClipboardIE2(sElementId)
{
// Récupération de l'objet représentant le champ de formulaire.
var oElement = document.getElementById(sElementId);
// Création du TextRange.
var oRange = oElement.createTextRange();
// Copie du contenu du champ dans le presse-papier.
oRange.execCommand('Copy');
// On ne veut pas suivre le lien après le clic.
return false;
}
Elle s’utilise donc de la manière suivante :
Code (HTML)
<input id="tocopy" type="text" value="Texte à copier." />
<a onclick="return copyToClipboardIE2('tocopy');" href="#">
Copier dans le presse-papier
</a>
Firefox
Sur Firefox, la solution que j’ai trouvé est plus compliquée… Pour commencer, Firefox n’autorise pas, par défaut, Javascript à accéder au presse-papier. Une configuration est nécessaire de la part de l’utilisateur. Pour la marche à suivre, je vous conseille cette page.
Mozilla fournit un composant nommé @mozilla.org/widget/clipboardhelper;1 permettant de copier du texte dans le presse-papier (Mozilla fournit également d’autres composants, plus généraux qui permettent des actions plus étendues sur le presse-papier) [Plus d'informations].
Même si la configuration permettant l’accès au presse-papier a été correctement mise en place, une confirmation est demandée à l’utilisateur avant l’exécution de l’instruction.
La fonction peut alors s’écrire de la manière suivante :
Code (JavaScript)
function copyToClipboardFF(sText)
{
try
{
// On test si la configuration permet l'accès au presse-papier.
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}
catch (e)
{
alert("Impossible d'accéder au presse-papier.");
}
// Initialisation du composant fournit par Mozilla.
var gClipboardHelper =
Components.classes["@mozilla.org/widget/clipboardhelper;1"]
.getService(Components.interfaces.nsIClipboardHelper);
// Copie du texte dans le presse papier.
gClipboardHelper.copyString(sText);
// On ne veut pas suivre le lien après le clic.
return false;
}
Avec le code HTML associé :
Code (HTML)
<a onclick="return copyToClipboardFF('Texte à copier.');" href="#">
Copier dans le presse-papier
</a>
Autres navigateurs
Malheureusement, je n’ai pas réussi à trouver de méthode équivalente sur les autres navigateurs. On peut, mais je n’ai pas testé, réaliser l’opération en Flash, à ce que j’ai lu, mais ça oblige l’utilisateur à avoir installé et activé Flash sur son navigateur. Bon, comme en plus je n’y connais rien en Flash, je n’ai pas creusé cette piste, ce sera peut-être pour une autre fois !
Dans mon cas, comme je devais copier une URL, j’ai opté pour la solution de mettre l’URL sur le lien de copie, ainsi, les utilisateur qui ne peuvent pas copier à l’aide du Javascript pourront copier le lien via le menu contextuel “Copier l’adresse du lien”, mais cette solution n’est pas toujours utilisable 
Fonction générale de copie
Finalement, on peut s’en sortir assez bien avec une fonction de ce type, qui copiera sur IE, copiera sur Firefox si la configuration et l’utilisateur le permettent et affichera un message d’erreur sur les autres navigateur (le mieux étant bien sûr de le pas proposer ce lien de copie sur les navigateurs ne la permettant pas).
Code (JavaScript)
function copyToClipboard(sText)
{
// Cas où on a accès à l'objet clipboardData.
if (window.clipboardData)
{
return copyToClipboardIE1(sText);
}
// Cas où on peut tester la configuration de Firefox sur
else if (typeof(netscape) == 'object' && typeof(Components) == 'object')
{
return copyToClipboardFF(sText);
}
else
{
alert("Cette fonctionnalité n'est pas disponible pour votre navigateur.");
}
return false;
}
Pour tester, c’est par là !
, ou 
depuis votre propre site.
3 commentaires
boulet 29 juillet 2009 à 5:21
visiblement ca ne fonctionne pas avec les nouvelles version de firefox
Mya 29 juillet 2009 à 22:06
Effectivement, ça n’a pas l’air d’être compatible avec Firefox 3.0 que j’ai là… Mais j’ai la 3.5 sur un autre PC et il me semble que ça fonctionnait…Je referai certainement des tests du coup dans les prochains temps et je mettrai l’article à jour quand j’aurai une correction ;o)
EDIT: En fait, sur la 3.5.1 ça fonctionne tout à fait. Le message d’erreur que j’ai eu hier en testant sur la 3.0.11 et que j’ai interprété un peu vite vient du fait que je n’ai pas configuré mon Firefox pour autoriser les opérations sur le presse papier. Donc a priori, tout roule.
boulet_sensei 11 août 2009 à 3:36
j ai egalement beaucoup galere pour trouver quelque chose dans le genre, et je suis finalement tombe sur ca :
http://beckelman.net/post/2008/11/30/Add-Copy-to-Clipboard-Command-To-contextMenujs-Plugin-Demo.aspx
un melange de jquery et flash, qui fonctionne a merveille ~ si ca peut etre utile a quelqu un..
Laisser un commentaire