JQuery Copy to Clipboard Example

How to copy span, div, or other HTML element contents to clipboard using JQuery

JQuery Copy Span or Div Contents to Clipboard ExampleIn this blog, I provide examples of code I have written or used over the years. With each post, I provide the ability for you the user to copy the code contents to the clipboard so you can paste it into your page. This handy copy to clipboard logic enables you to copy the contents of the code block without having to select it first. Just click the copy hyperlink and the script does the rest.

I particularly like the example below because I can use it in my blog post without having to embed script in the post itself. I simply load a script function in the head tag of my pages and provide a structured link in the post body that identifies the span (or pre tag in my blog) that I want to copy. The script selects the range of data in the span, highlights it, copies it to the clipboard, then alerts the user the copy has completed.

The script monitors for a click event on all elements on the page with a name=”copy_pre”. All of our copy links are named “copy_pre”. Each link has a unique ID that matches the ID of the span we want to copy.

The copy script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script >
$(document).ready(function(){
	$("a[name=copy_pre]").click(function() {
		var id = $(this).attr('id');
		var el = document.getElementById(id);
		var range = document.createRange();
		range.selectNodeContents(el);
		var sel = window.getSelection();
		sel.removeAllRanges();
		sel.addRange(range);
		document.execCommand('copy');
		alert("Contents copied to clipboard.");
		return false;
	});
});
</script>

Copy Code

The HTML content to be copied and the links to copy it.

<div id="div_1">
	This is the first content we want to select and copy to the clipboard.
</div>
<a id="div_1" href="#" name="copy_pre">Copy Contents</a>
<div id="div_2">
	This is the second content we want to select and copy to the clipboard.
</div>
<a id="div_2" href="#" name="copy_pre">Copy Contents</a>

Copy Code


Click Here for a Working Example

References

JQuery
JQuery .ready
JQuery .attr
JavaScript getElementById
JavaScript createRange
JavaScript Range.selectNodeContents
JavaScript Window.getSelection
JavaScript Selection.removeAllRanges
JavaScript Selection.addRange
JavaScript Document.execCommand
JavaScript Window.alert

5 Replies to “JQuery Copy to Clipboard Example”

  1. Thank you! I spent hours trying to find a simple solution after wondering how to set up a ‘copy to the clipboard’ using jQuery and a div text. It kept giving me answers that ONLY applied to or .

  2. Hello Brian.
    I can’t thank you enough for sharing your copy-to-clipboard. I’ve tested several others but my issue was that I needed to copy the text content of a div with a dynamic ID. Most others were calling the Div ID inside the function and I never got them working, but with your sweet code, it was as simple as set my div with the id:
    id=text$id and it all worked perfectly.

    The only thing I would need to find out is how to show the copied text in the alert popup, but I can borrow that from other scripts and make it work.

    Thanks again for your shared code.

    1. Technically you are correct. I could adjust the code to use a slightly different ID for the “a” tag to avoid any conflicts. To do that I would likely append a character to the “a” tag ID so instead of a id=”div_1″ I would use a id=”div_1a” then in the script I would have to trim off the last character (div_1a is trimmed to div_1) in order to get the ID for the div tag.

      Thank you for the heads up.
      Brian

Leave a Reply

I appreciate and welcome your comments. Please keep in mind that comments are moderated according to my comment policy.
Your email address will not be published. Required fields are marked *