Contents hide 1) Table Of Content 2) Copy Text to Clipboard Using Javascript 2.1) From Textarea Copy Text to Clipboard 2.2) From Div Tag Copy Text to Clipboard 3) Copy Text to Clipboard Using ClipboardJS 3.1) Installing The Dependencies 3.2) From Input Field Copy Text to Clipboard Using ClipboardJS 3.3) From HTML kdb Copy Text to Clipboard Using ClipboardJS In this tutorial, We will see how to Copy Text to Clipboard Using Javascript And JQuery.A browser extension that adds a “copy to clipboard” button to every code block on GitHub, MDN, StackOverflow, StackExchange, npm, and even Medium. Table Of Content Copy Text to Clipboard Using Javascript Copy Text to Clipboard Using ClipboardJS Check out the demo on how to Copy Text to Clipboard Using Javascript. Demo Check out the demo on how to Copy Text to Clipboard Using ClipboardJS. Demo Copy Text to Clipboard Using Javascript From Textarea Copy Text to Clipboard In this example we are copying the text from the textarea field to clipboard using javascript with help of copyToClipboard_textArea function. JS function copyToClipboard_textArea() { var copyText = document.getElementById("myInput"); copyText.select(); document.execCommand("Copy"); } Display Content which need to be copied Markup <textarea id="myInput_textArea" rows="4" cols="50"> Geeks Trick - Copy Code From Text Area</textarea> <br> <button class="btn btn-primary" onclick="copyToClipboard_textArea()">Copy text</button> From Div Tag Copy Text to Clipboard In this example we are copying the text from the div tag to clipboard using javascript with help of copyToClipboard_div function. JS function copyToClipboard_div() { // Create a new textarea element and give it id='t' let textarea = document.createElement('textarea') textarea.id = 't' // Optional step to make less noise on the page, if any! textarea.style.height = 0 // Now append it to your page somewhere, I chose document.body.appendChild(textarea) // Give our textarea a value of whatever inside the div of id=containerid textarea.value = document.getElementById("myInput").innerText // Now copy whatever inside the textarea to clipboard let selector = document.querySelector('#t') selector.select() document.execCommand('copy') // Remove the textarea document.body.removeChild(textarea) } Display Content which need to be copied Markup <div id="myInput_div" style="background-color:yellow;padding:10px;" > Geeks Trick - Copy Code From Div Tag </div> <button id="my_button" class="btn btn-primary" onclick="copyToClipboard_div()">Copy text</button> Browsers support : ChromeFirefoxOperaIESafari 43.0.2356 41.0 30 9 Is Not supported Copy Text to Clipboard Using ClipboardJS Todays most of the websites using the functionality for copy and past of the content mentioned on the site such as copying the set of code are some quotes. The best part is the all of the browsers are supported by the clipboardJS plugin. Installing The Dependencies Dependencies <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script> From Input Field Copy Text to Clipboard Using ClipboardJS Let’s create an input field with the button which will copy the content form the input files Markup <h2> 1. Copy text from the Input field</h2> <input type="text" id="example1" value="https://geekstrick.com" class="form-control"> <button class="btn copyButton " data-clipboard-target="input#example1" ata-clipboard-action="example1" type="button"> <i class="far fa-copy"></i> </button> Now Let’s write some script to copy the content to the clipboard and get the response i.e. error or the success message var clipboard = new Clipboard('.copyButton'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); From HTML kdb Copy Text to Clipboard Using ClipboardJS Similarly, we can select and copy some content from the HTML tags such as kdb Markup <h2>2. Copy text from the kbd tag</h2> <label> Product Number : </label> <kbd id="copy"> 12743-64833-383993-646383 </kbd> <button class="copyButton btn btn-default" id="copyButtonId" data-clipboard-action="copy" data-clipboard-target="kbd#copy"> <i class="far fa-copy"></i> </button> Get More Post On JavaScript Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: bootstrap, clipboardjs, css3, HTML, JavaScript, JQuery, js