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.

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.

function copyToClipboard_textArea() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("Copy");
}

Display Content which need to be copied

<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.

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

<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

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

<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

<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

<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