{"id":5972,"date":"2016-08-15T13:37:10","date_gmt":"2016-08-15T11:37:10","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=5972"},"modified":"2016-08-17T14:33:28","modified_gmt":"2016-08-17T12:33:28","slug":"copier-presse-papier-en-javascript","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/copier-presse-papier-en-javascript","title":{"rendered":"Copier dans le presse-papier en JavaScript"},"content":{"rendered":"<p>Vous avez certainement connu ces boutons pour \u00ab\u00a0Copier dans le presse-papier\u00a0\u00bb utilisant pirouette en Flash pour passer outre un blocage de s\u00e9curit\u00e9 de nos navigateurs ? Avec l&rsquo;\u00e9volution des API en JS et l&rsquo;\u00e9coute de la demande des d\u00e9veloppeurs, il est possible depuis maintenant quelques temps de le faire en JS, nativement.<\/p>\n<p><!--more--><\/p>\n<p>La technique est relativement simple puisqu&rsquo;elle consiste en l&rsquo;exploitation de la fonction <code>execCommand()<\/code> disponible au niveau du <code>document<\/code>.<\/p>\n<h2>Qu&rsquo;est-ce que <code>execCommand()<\/code><\/h2>\n<p>La fonction execCommand() se pr\u00e9sente ainsi :<\/p>\n<pre class=\"code\"><code class=\"language-js\">document.execCommand( commandName, showDefaultUI, valueArgument );<\/code><\/pre>\n<p>o\u00f9 les param\u00e8tres repr\u00e9sentent :<\/p>\n<ul>\n<li><strong><code>commandName<\/code><\/strong> :<br \/>\nle nom d&rsquo;une commande \u00e0 ex\u00e9cuter (<code>copy<\/code>, <code>paste<\/code>, <code>undo<\/code>, <code>redo<\/code>, <code>insertHTML<\/code>, etc.)<\/li>\n<li><strong><code>showDefaultUI<\/code><\/strong> :<br \/>\n<code>true<\/code> ou <code>false<\/code>, pour afficher ou non l&rsquo;interface par d\u00e9faut (pas support\u00e9 par Mozilla actuellement)<\/li>\n<li><strong><code>valueArgument<\/code><\/strong> :<br \/>\npour les commandes qui ont besoin d&rsquo;un argument suppl\u00e9mentaire, comme par exemple la commande <code>insertImage<\/code> qui attend une URL en valeur.<\/li>\n<\/ul>\n<p>Elle permet comme son nom l&rsquo;indique d&rsquo;ex\u00e9cuter une commande dans la fen\u00eatre courante. Pour une documentation plus compl\u00e8te, l&rsquo;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/execCommand\">article du MDN<\/a> est une bonne ressource.<\/p>\n<h2>Exemple de code<\/h2>\n<p>Je vais aller au plus simple pour ce code JS, je vous laisserai cliquer sur le lien de la d\u00e9mo (qui contient le code \u00e9galement) un peu plus bas si vous voulez un exemple plus complet d&rsquo;impl\u00e9mentation.<\/p>\n<p>Imaginons ce code HTML :<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;textarea id=\"to-copy\"&gt;Write something and copy it into your clipboard by clicking in the button below.&lt;\/textarea&gt;\r\n\r\n&lt;button id=\"copy\" type=\"button\"&gt;Copy in clipboard&lt;\/button&gt;<\/code><\/pre>\n<p>Le code JavaScript suivant, tr\u00e8s sommaire, permet d\u00e9j\u00e0 de placer dans votre presse-papier le contenu du textarea. Vous pouvez ensuite coller ce contenu o\u00f9 bon vous semble. (autre champ, document, etc.)<\/p>\n<pre class=\"code\"><code class=\"language-javascript\">var toCopy  = document.getElementById( 'to-copy' ),\r\n    btnCopy = document.getElementById( 'copy' );\r\n\r\nbtnCopy.addEventListener( 'click', function(){\r\n\ttoCopy.select();\r\n\tdocument.execCommand( 'copy' );\r\n\treturn false;\r\n} );<\/code><\/pre>\n<p>Lorsque <code>document.execCommand()<\/code> s&rsquo;est bien ex\u00e9cut\u00e9e, elle retourne <code>true<\/code>, \u00e0 l&rsquo;inverse si \u00e7a s&rsquo;est mal pass\u00e9 (pas de support ou erreur) elle retourne <code>false<\/code>.<br \/>\nJe vous laisse imaginer ce qu&rsquo;il est possible de faire avec du coup. D&rsquo;ailleurs en voici un exemple :<\/p>\n<p style=\"text-align: center;\"><a class=\"demo\" href=\"http:\/\/codepen.io\/CreativeJuiz\/pen\/rLPVkP\">D\u00e9mo sur CodePen<\/a><\/p>\n<p>N&rsquo;h\u00e9sitez pas \u00e0 partager votre code sur CodePen et dans les commentaires pour nous montrer ce que vous avez fait avec cette id\u00e9e.<\/p>\n<p class=\"message\">La micro biblioth\u00e8que <strong>Clipboard.js<\/strong> peut vous aider \u00e0 am\u00e9liorer vos d\u00e9veloppements. Allez jeter un oeil \u00e0 <a href=\"https:\/\/clipboardjs.com\/\">Clipboard.js<\/a><\/p>\n<p>Amusez-vous bien !<\/p>\n<div class=\"ciu_embed\" data-feature=\"document-execcommand\" data-periods=\"future_1,current,past_1,past_2\"><a href=\"http:\/\/caniuse.com\/#feat=document-execcommand\">Can I Use document-execcommand?<\/a><\/div>\n\t\t<script src=\"\/\/cdn.jsdelivr.net\/caniuse-embed\/1.0.1\/caniuse-embed.min.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>Vous avez certainement connu ces boutons pour \u00ab\u00a0Copier dans le presse-papier\u00a0\u00bb utilisant pirouette en Flash pour passer outre un blocage de s\u00e9curit\u00e9 de nos navigateurs ? Avec l&rsquo;\u00e9volution des API en JS et l&rsquo;\u00e9coute de la demande des d\u00e9veloppeurs, il est possible depuis maintenant quelques temps de le faire en JS, nativement.<\/p>\n","protected":false},"author":4,"featured_media":5976,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[610,50,9],"tags":[26,228,511],"coauthors":[597],"class_list":["post-5972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-ressources-telechargements","category-tutoriels","tag-api","tag-astuce","tag-snippet"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/5972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=5972"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/5972\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/5976"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=5972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=5972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=5972"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=5972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}