+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] JavaScript Copy Text to Clipboard (/thread-99928.html)
[Tut] JavaScript Copy Text to Clipboard - xSicKxBot - 09-10-2022
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"><textarea id="text_to_copy">Text to copy</textarea>
</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/2022/08/javascript-copy-clipboard-300x201.jpg 300w, https://phppot.com/wp-content/uploads/2022/08/javascript-copy-clipboard-768x515.jpg 768w, https://phppot.com/wp-content/uploads/2022/08/javascript-copy-clipboard.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"><html>
<head>
<title>JavaScript Copy Text to Clipboard</title>
<script src="copy-clipboard-async.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link rel='stylesheet' href='style.css' type='text/css' />
<link rel='stylesheet' href='form.css' type='text/css' />
</head>
<body> <div class="phppot-container"> <h1>JavaScript Copy Text to Clipboard</h1> <div class="row"> <div class="message-input"> <label for="message-input">Message: </label> <textarea id="message-input" rows="15" name="message-input" class="message-input"></textarea> </div> </div> <div class="row"> <button onclick="copyToClipboard('message-input')" type="button">Copy to clipboard</button> </div> <div class="row"> <div id="copied"></div> </div> </div>
</body>
</html>
</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 = $("<textarea>"); $("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"><html>
<head>
<title>JavaScript Copy Text to Clipboard</title>
</head>
<body> <!-- In this style, we present the control to the end user to copy. --> <!-- Text to be copied is shown to the user and he uses the built-in browser's feature and copies to the clipboard. --> <!-- If this is possible to use in your use case, then this is the safest method. --> <button id="copy-btn" onclick="copyToClipboard(document.getElementById('copy-btn').innerHTML)">Text to copy.</button> <script> function copyToClipboard(text) { window.prompt("Press Ctrl+C to copy to clipboard.", text); } </script>
</body>
</html>
</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/09/javascript-copy-text-to-clipboard/