Create an account


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tut] JavaScript Copy Text to Clipboard

#1
JavaScript Copy Text to Clipboard

<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/09/javascript-copy-text-to-clipboard.jpg" width="550" height="369" title="" alt="" /></div><div><div class="modified-on" readability="7.1489361702128"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on September 9th, 2022.</div>
<p>This example script in JavaScript is to copy text to the system clipboard. I am presenting three different methods in this tutorial.</p>
<ol>
<li>Via ClipBoard API.</li>
<li>Using document.executeCommand (not recommended).</li>
<li>By user consent.</li>
</ol>
<p>This JS quick example uses the first and the best method to copy content of a textarea to the clipboard.</p>
<div class="post-section-highlight" readability="36">
<h2>Quick example</h2>
<pre class="prettyprint"><code class="language-javascript">var contentToCopy = document.getElementById(text_to_copy).value;
navigator.clipboard.writeText(contentToCopy).then(function() { console.log('Copied to clipboard with async.');
}, function(err) { console.error('Unable to copy with async ', err);
});
</code></pre>
</div>
<p>HTML textarea element from where the content is copied by the JS script.</p>
<pre class="prettyprint"><code class="language-html">&lt;textarea id="text_to_copy"&gt;Text to copy&lt;/textarea&gt;
</code></pre>
<p><img loading="lazy" class="alignnone size-large wp-image-19231" src="https://phppot.com/wp-content/uploads/2022/08/javascript-copy-clipboard-550x369.jpg" alt="javascript copy clipboard" width="550" height="369" srcset="https://phppot.com/wp-content/uploads/2022/08/javascript-copy-clipboard-550x369.jpg 550w, https://phppot.com/wp-content/uploads/20...00x201.jpg 300w, https://phppot.com/wp-content/uploads/20...68x515.jpg 768w, https://phppot.com/wp-content/uploads/20...pboard.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>1) Using The Clipboard API</h2>
<p>Below HTML script gives an interface with a textarea and a button to trigger the <a href="https://phppot.com/javascript/disable-mouse-right-click-cut-copy-paste/">copy action</a>.</p>
<p>On clicking the button to call the JavaScript <em>copyToClipBoard()</em> function. This function moves the textarea content to the clipboard.</p>
<p class="code-heading">index.html</p>
<pre class="prettyprint"><code class="language-html">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;JavaScript Copy Text to Clipboard&lt;/title&gt;
&lt;script src="copy-clipboard-async.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;link rel='stylesheet' href='style.css' type='text/css' /&gt;
&lt;link rel='stylesheet' href='form.css' type='text/css' /&gt;
&lt;/head&gt;
&lt;body&gt; &lt;div class="phppot-container"&gt; &lt;h1&gt;JavaScript Copy Text to Clipboard&lt;/h1&gt; &lt;div class="row"&gt; &lt;div class="message-input"&gt; &lt;label for="message-input"&gt;Message: &lt;/label&gt; &lt;textarea id="message-input" rows="15" name="message-input" class="message-input"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;button onclick="copyToClipboard('message-input')" type="button"&gt;Copy to clipboard&lt;/button&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div id="copied"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>This JS script writes the text to the clipboard by calling clipboard.writeText(). It enhances the quick example by providing an interface to copy content via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API" target="_blank" rel="noopener">ClipBoard API</a>.</p>
<p class="code-heading">copy-clipboard-async.js</p>
<pre class="prettyprint"><code class="language-javascript">/** * to copy to the clipboard using the Clipboard API * * @param element * @returns */
function copyToClipboard(element) { var contentToCopy = document.getElementById(element).value; navigator.clipboard.writeText(contentToCopy).then(function() { console.log('Copied to clipboard with async.'); }, function(err) { console.error('Unable to copy with async ', err); });
}
</code></pre>
<h2>2) document.execCommand</h2>
<p>This method was widely used to copy content by calling the executeCommand(“copy”). It is deprecated but still supported by many browsers.</p>
<p>It dynamically <a href="https://phppot.com/jquery/jquery-apend/">appends</a> the textarea element to the HTML body and selects its content using JavaScript. Then the executeCommand() function call triggers the copy action.</p>
<p class="code-heading">copy-clipboard-execcommand.js</p>
<pre class="prettyprint"><code class="language-javascript">/** * to copy to the clipboard using the document.execCommand * * @param element * @returns */
function copyToClipboard(element) { var contentToCopy = document.getElementById(element).value; var temp = $("&lt;textarea&gt;"); $("body").append($temp); temp.val(contentToCopy); temp.select(); document.execCommand("copy"); temp.remove(); console.log('Copied!');
}
</code></pre>
<h2>3) Copy by user</h2>
<p>This is the safest method of copying the content to the clipboard. This does not use any native function of the JavaScript and can be described more of a process. It prompts the user to confirm copying the selected content to the clipboard.</p>
<p class="code-heading">copy-by-user-consent.html</p>
<pre class="prettyprint"><code class="language-php-template">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;JavaScript Copy Text to Clipboard&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt; &lt;!-- In this style, we present the control to the end user to copy. --&gt; &lt;!-- Text to be copied is shown to the user and he uses the built-in browser's feature and copies to the clipboard. --&gt; &lt;!-- If this is possible to use in your use case, then this is the safest method. --&gt; &lt;button id="copy-btn" onclick="copyToClipboard(document.getElementById('copy-btn').innerHTML)"&gt;Text to copy.&lt;/button&gt; &lt;script&gt; function copyToClipboard(text) { window.prompt("Press Ctrl+C to copy to clipboard.", text); } &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p><a class="download" href="https://phppot.com/downloads/javascript/javascript-copy-clipboard.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/javascript-copy-clipboard/#top" class="top">↑ Back to Top</a> </p>
</div>


https://www.sickgaming.net/blog/2022/09/...clipboard/
Reply



Forum Jump:


Users browsing this thread:
1 Guest(s)

Forum software by © MyBB Theme © iAndrew 2016