{"id":5981,"date":"2016-08-15T14:42:26","date_gmt":"2016-08-15T12:42:26","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/en\/?p=5981"},"modified":"2020-09-02T21:08:16","modified_gmt":"2020-09-02T19:08:16","slug":"copy-into-clipboard-with-javascript","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/en\/tutorials\/copy-into-clipboard-with-javascript","title":{"rendered":"Copy into clipboard with JavaScript"},"content":{"rendered":"<p>You certainly already met those buttons to &#8220;Copy into Clipboard&#8221;. They usually use a trick made with Flash to overcome a security feature provided by our web browsers? Avec the evolution of JS API and the listening of developer requests, you can now (since some months) do it with JavaScript natively.<\/p>\n<p><!--more--><\/p>\n<p>The technic is quite simple. You just need to use the <code>execCommand()<\/code> function available at the <code>document<\/code> level.<\/p>\n<h2>What is <code>execCommand()<\/code><\/h2>\n<p>The <code>execCommand()<\/code> function looks like that:<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">document.execCommand( commandName, showDefaultUI, valueArgument );<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>where the parameters are:<\/p>\n<ul>\n<li><strong><code>commandName<\/code><\/strong>:<br \/>\nthe command name to execute (<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> or <code>false<\/code>, to use the default interface (or not\u2026 not supported bu Mozilla at the moment)<\/li>\n<li><strong><code>valueArgument<\/code><\/strong>:<br \/>\nsome commands need an argument, for example the <code>insertImage<\/code> command which is waiting for an URL as value.<\/li>\n<\/ul>\n<p>As its name tells us, it provide to you the ability to execute a command inside the current window. To get a better and complete documentation the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/execCommand\">MDN article<\/a> is a good resource.<\/p>\n<h2>Code snippet<\/h2>\n<p>To give you the essential point of this feature, I will write a minimalist code example. I&#8217;ll let you click on the demo link below (which presents a code too) if you want a more concret how-to-use example.<\/p>\n<p>Let&#8217;s imagine this HTML:<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;textarea id=&quot;to-copy&quot;&gt;<br\/>\tWrite something and copy it into your clipboard by clicking in the button below.<br\/>&lt;\/textarea&gt;<br\/>&lt;button id=&quot;copy&quot; type=&quot;button&quot;&gt;<br\/>\tCopy in Clipboard<br\/>&lt;\/button&gt;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>The next JavaScript code is very simple and provides you the main &#8220;copy in your clipboard&#8221; function. The content of the textarea element will be copied on a simple button click. Then, you can paste this content where ever you want. (other input field, editing document, etc.)<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">var toCopy = document.getElementById( &#039;to-copy&#039; ),<br\/>\tbtnCopy = document.getElementById( &#039;copy&#039; );<br\/><br\/>btnCopy.addEventListener( &#039;click&#039;, function(){<br\/>\ttoCopy.select();<br\/>\tdocument.execCommand( &#039;copy&#039; );<br\/>\treturn false;<br\/>} );<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>When <code>document.execCommand()<\/code> succeeded it returns <code>true<\/code>, at the opposite if something went wrong (no support or error) it returns <code>false<\/code>.<br \/>\nI let you imagine what you can do with that. By the way, take a look at this example:<\/p>\n<p style=\"text-align: center;\"><a class=\"demo\" href=\"http:\/\/codepen.io\/CreativeJuiz\/pen\/rLPVkP\">Demo on CodePen<\/a><\/p>\n<p>Share your code on CodePen and in a new comment in that blog to show your results, I&#8217;m curious \ud83d\ude42<\/p>\n<p class=\"message\">The <strong>Clipboard.js<\/strong> micro librairy can help you to improve developement possibilities. Take a look at <a href=\"https:\/\/clipboardjs.com\/\">Clipboard.js<\/a><\/p>\n<p>Have fun!<\/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>You certainly already met those buttons to &#8220;Copy into Clipboard&#8221;. They usually use a trick made with Flash to overcome a security feature provided by our web browsers? Avec the evolution of JS API and the listening of developer requests, you can now (since some months) do it with JavaScript natively.<\/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":[657,653,647],"tags":[511,678],"coauthors":[597],"class_list":["post-5981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-en","category-resources-tools","category-tutorials","tag-snippet","tag-tips"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/5981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/comments?post=5981"}],"version-history":[{"count":2,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/5981\/revisions"}],"predecessor-version":[{"id":7533,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/5981\/revisions\/7533"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/media\/5976"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/media?parent=5981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/categories?post=5981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/tags?post=5981"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/coauthors?post=5981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}