{"id":2148,"date":"2021-09-13T16:45:16","date_gmt":"2021-09-13T16:45:16","guid":{"rendered":"https:\/\/blog.embold.io\/?p=2148"},"modified":"2021-09-14T07:45:37","modified_gmt":"2021-09-14T07:45:37","slug":"how-to-add-copy-to-clipboard-functionality-to-your-website","status":"publish","type":"post","link":"https:\/\/blog.embold.io\/fr\/how-to-add-copy-to-clipboard-functionality-to-your-website\/","title":{"rendered":"How to add &#8216;copy to clipboard&#8217; functionality to your website?"},"content":{"rendered":"\n<p>Let\u2019s assume you\u2019re building your own developer blog, and you\u2019re going to have code snippets on your blog pages. In order to make the life of your readers easier, you decide to add a copy to the clipboard button to the code snippets, so readers can simply click the button to copy the code instead of having to manually select and CTRL + C.<br><\/p>\n\n\n\n<p>Previously, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Add-ons\/WebExtensions\/Interact_with_the_clipboard\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">document.execCommand.(\u201ccopy\u201d)<\/a> was used to achieve this purpose. But it is a very tacky solution and provides synchronous access to the clipboard, which has performance and security implications. So, the new clipboard API was designed to replace it.&nbsp;<br><\/p>\n\n\n\n<p>The <code>clipboard <\/code>API is accessed asynchronously can only be used on pages served over HTTPS and <code>localhost<\/code>. The API can only be triggered by user interaction, such as a click, and requires the user to grant permission on the first instance of the call on a page. This is to prevent misuse and avoid potential issues.<\/p>\n\n\n\n<p>The <code>clipboard <\/code>API has 4 methods:&nbsp;<\/p>\n\n\n\n<ul><li><code>read<\/code>: used to get arbitrary data, such as images from the clipboard for pasting<\/li><li><code>readText<\/code>: used to get only textual components of the clipboard for pasting<\/li><li><code>write<\/code>: used to copy arbitrary data, such as images, to the clipboard.<\/li><li><code>writeText<\/code>: used to copy textual data to the clipboard<\/li><\/ul>\n\n\n\n<p>The clipboard API is straightforward in usage. However, at the time of writing this, it is not fully supported by all modern browsers. Firefox and IOS still have partial support, according to <a href=\"https:\/\/caniuse.com\/async-clipboard\">caniuse<\/a>.&nbsp;<br><\/p>\n\n\n\n<p>So, first, you need to check if the features and methods you want to use are supported by the receiving browser. For our use case, the method we need is <code>writeText<\/code>.&nbsp;<br><\/p>\n\n\n\n<p>Now, assuming that there will be a few code snippet boxes on each blog page, and they\u2019ll all have the same class name and a similar HTML structure like so:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"body\"&gt;\n   &lt;div class=\"box\"&gt;\n      &lt;p&gt; Hello World !&lt;\/p&gt;\n      &lt;button class=\"button\"&gt;copy&lt;\/button&gt;\n   &lt;\/div&gt;\n   &lt;div class=\"box\"&gt;\n      &lt;p&gt; Lorem Ipsum!&lt;\/p&gt;\n      &lt;button class=\"button\"&gt;copy&lt;\/button&gt;\n   &lt;\/div&gt;\n&lt;\/div&gt; <\/code><\/pre>\n\n\n\n<p>Then, the JavaScript will be:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const copyCode = async (event) =&gt; {\n  if (navigator.clipboard &amp;&amp; navigator.clipboard.writeText) {\n    const code = event.target.parentElement.children[0].innerText;\n    try {\n      await navigator.clipboard.writeText(code)\n      event.target.textContent = 'Copied'\n    } catch (err) {\n      console.error('Failed to copy!', err)\n    }\n  }else{\n     \/\/clipboard API or clipboard.writeText method is not supported\n  }\n}\n\nlet buttons = document.querySelectorAll(\".button\");\n\nbuttons.forEach((button)=&gt;{\n  button.addEventListener('click', async(e) =&gt; {\n    await copyCode(e)\n  })\n})\n<\/code><\/pre>\n\n\n\n<p>The <code>clipboard <\/code>methods returns promise hence the <code>async <\/code>and <code>await <\/code>keywords. We used <code>event.target.parentElement.children[0]<\/code>, to select the first child element (which is the paragraph), of the parent element of the button on which the click event occurred.&nbsp;<br><\/p>\n\n\n\n<p>If<code> navigator.clipboard &amp;&amp; navigator.clipboard.writeText<\/code> is not supported by the user\u2019s browser, the code above will not run. In that case, you can either show an alert error within the else statement like; \u201cCopy functionality not supported by your browser.  Please copy manually\u201d, or use the old <code>document.execCommand<\/code> (which I wouldn\u2019t advise).&nbsp;<br><\/p>\n\n\n\n<p>For a full demo, see codepen<a href=\"https:\/\/codepen.io\/lindaflex\/pen\/vYZyYmo\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\"> here<\/a>.<br><\/p>\n\n\n<p><span style=\"color: #ff0000\">Blog Credits: Linda Ikechukwu<\/span><\/p>\n<div>\u201d Linda Ikechukwu is a Frontend Developer turned Technical Content Consultant. She enjoys strategizing on and creating content that helps tech startups connect with their target audience. \u201c<br \/><img decoding=\"async\" loading=\"lazy\" class=\"alignnone  wp-image-2189\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot.jpeg\" alt=\"\" width=\"150\" height=\"210\" srcset=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot.jpeg 715w, https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot-585x819.jpeg 585w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/div>","protected":false},"excerpt":{"rendered":"<p>Let\u2019s assume you\u2019re building your own developer blog, and you\u2019re going to have code snippets on your blog pages. In order to make the life of your readers easier, you&hellip;<\/p>\n","protected":false},"author":10,"featured_media":2181,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[204,206,203,205,31],"better_featured_image":{"id":2181,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":3000,"height":2000,"file":"2021\/09\/embold-blog-clipboard.png","sizes":{"thumbnail":{"file":"embold-blog-clipboard-150x150.png","width":150,"height":150,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-150x150.png"},"medium_large":{"file":"embold-blog-clipboard-768x512.png","width":768,"height":512,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-768x512.png"},"penci-full-thumb":{"file":"embold-blog-clipboard-1170x780.png","width":1170,"height":780,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-1170x780.png"},"penci-slider-thumb":{"file":"embold-blog-clipboard-1170x663.png","width":1170,"height":663,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-1170x663.png"},"penci-magazine-slider":{"file":"embold-blog-clipboard-780x516.png","width":780,"height":516,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-780x516.png"},"penci-slider-full-thumb":{"file":"embold-blog-clipboard-1920x800.png","width":1920,"height":800,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-1920x800.png"},"penci-single-full":{"file":"embold-blog-clipboard-1920x1280.png","width":1920,"height":1280,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-1920x1280.png"},"penci-thumb":{"file":"embold-blog-clipboard-585x390.png","width":585,"height":390,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-585x390.png"},"penci-masonry-thumb":{"file":"embold-blog-clipboard-585x390.png","width":585,"height":390,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-585x390.png"},"penci-thumb-square":{"file":"embold-blog-clipboard-585x585.png","width":585,"height":585,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-585x585.png"},"penci-thumb-vertical":{"file":"embold-blog-clipboard-480x650.png","width":480,"height":650,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-480x650.png"},"penci-thumb-small":{"file":"embold-blog-clipboard-263x175.png","width":263,"height":175,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-263x175.png"},"jr_insta_square":{"file":"embold-blog-clipboard-640x640.png","width":640,"height":640,"mime-type":"image\/png","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard-640x640.png"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":2148,"source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/embold-blog-clipboard.png"},"translation":{"provider":"WPGlobus","version":"2.10.8","language":"fr","enabled_languages":["en","es","de","fr","ru"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"de":{"title":false,"content":false,"excerpt":false},"fr":{"title":false,"content":false,"excerpt":false},"ru":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/posts\/2148"}],"collection":[{"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/comments?post=2148"}],"version-history":[{"count":5,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/posts\/2148\/revisions"}],"predecessor-version":[{"id":2190,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/posts\/2148\/revisions\/2190"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/media\/2181"}],"wp:attachment":[{"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/media?parent=2148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/categories?post=2148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embold.io\/fr\/wp-json\/wp\/v2\/tags?post=2148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}