Copy On Click

What/Why is it?

This plugin provides a simple and flexible way to add "copy to clipboard" functionality to a website. This sounds like a fairly simple thing to do, but up until fairly recently trying to do this from a web application was a nightmare, with the most portable solutions being based on Adobe Flash. Support for clipboard access in web browsers is still tenuous for security reasons, so it can be kind of difficult to find a method that works well for you.

I have seen various different techniques in use around the web, and I have selected what seems to be the most portable and flexible technique, that of using the document.execCommand("copy"); call, and have encapsulated it in a plugin for ease of use and deployment.

This technique literally creates a new temporary element "in the background", highlights the contents of the elements and then copies that selection, before finally deleting this temporary element again.

The main idea behind this plugin is the ability to easily and coherently add "Copy" buttons to a web page, and while the examples on this page are all static the plugin is quite at home to being used with dynamically generated buttons too - you just need to make sure you call the plugin for your added buttons!

Downloading the Plugin

You can feel free to use this plugin on your own sites if you wish under the terms of the GPL v3. Use the button below to download your copy.

Using the plugin

It should go without saying that you need to load jQuery before you can use this jQuery plugin; you can download the latest editions Here. I built this plugin against jQuery 3.2.1 and haven't tested earlier versions extensively, but I forsee no major issues using this with legacy jQuery.

The plugin is designed to copy some text into the system clipboard when an element is clicked. There are lots of ways you may wish to implement this, and the plugin attempts to be flexible enough to cover as many of them as possible; You can copy HTML, Text, Form control values and element attribute values from either the same element that was clicked or another that is pointed to.

All elements which have this copy-on-click behaviour must specify the data-copy-on-click attribute in their html, which is either the text to copy in its simplest form, or a jQuery selector string to find the element to copy.

For the simplest implementations, where you just want a button which copies a given piece of text, you need one HTML element and one line of JavaScript/jQuery initialisation code:

<!-- HTML HEAD SNIPPET -->
  <!-- Load jQuery -->
  <script src="/path/to/jquery.3.2.1.js"></script>

  <!-- Load Plugin -->
  <script src="/path/to/copy_on_click.js"></script>

  <!-- Initialise copy buttons on load -->
  <script>
    $(function(){
      /* Javascript called when page has loaded */
      $("*").copyOnClick();
    });
  </script>

<!-- HTML BODY SNIPPET -->
  <button data-copy-on-click="Copy This Text">Copy</button>
      

This example assumes we just want a button which copies the text "Copy This Text" when clicked. The plugin is much more powerful than this, however, so I advise you check out the more detailed examples in the planels below.

Plugin Options

The plugin has the following options, all of which are passed in as a single object argument:

Main Usage Examples:

These examples will cover most of what you need to know if you just want copy-on-click behaviour.

<button class="copy-default" data-copy-on-click="Simple Example">Copy</button>

$('*').copyOnClick();

<div id="text_copy"><b>This</b> is the text that will be <i>copied</i>.</div>
<button class="copy-text" data-copy-on-click="#text_copy">Copy Text</button>
<button class="copy-html" data-copy-on-click="#text_copy">Copy HTML</button>

$('.copy-text').copyOnClick({copyMode:"text"});
$('.copy-html').copyOnClick({copyMode:"html"});

<a href="http://sulli.work/jquery_copy_on_click#example_attr" id="link_copy">Link To This Page</a>
<button class="copy-attr" data-copy-on-click="#link_copy">Copy</button>

$('.copy-attr').copyOnClick({copyMode:"attr",attrTarget:"href"});

<button class="copy-value" data-copy-on-click="#input_copy">Copy Value</button>

$('.copy-value').copyOnClick({copyMode:"val"});

Popup Confirmation:

The user usually needs some way to know their click has worked, so the plugin provides a popup mechanism. You can control what css class these popups will have assigned to them, the text that appears on them and how long they appear, and you can override the default popup with your own routine if you prefer:

<style>
  .copy-confirmation {
    background-color:rgba(200,200,200,0.7);
    position:absolute;
    z-index:100;
    color:#000;
    font-size:15px;
    text-align:center;
    padding:10px;
    padding-top:5px;
    padding-bottom:5px;
    border-radius:3px;
    border:1px solid #ccc;
    display:block;
    max-width:60vw;
    margin-left:auto;
    margin-right:auto;
    margin-top:-15px;
    margin-bottom:1px;
  }
</style>
<button id="ex1" data-copy-on-click="Copied Text 1">None</button>
<button id="ex2" data-copy-on-click="Copied Text 2">½ sec</button>
<button id="ex3" data-copy-on-click="Copied Text 3">3 sec</button>
<button id="ex4" data-copy-on-click="Copied Text 4">Custom</button>
<button id="ex5" data-copy-on-click="Copied Text 5">Select</button>
<button id="ex6" data-copy-on-click="Copied Text 6">Simple</button>
                

$('#ex1').copyOnClick({confirmShow:false});
$('#ex2').copyOnClick({
  confirmTime:0.5,
  confirmClass:"copy-confirmation"
});
$('#ex3').copyOnClick({
  confirmTime:3,
  confirmClass:"copy-confirmation"
});
$('#ex4').copyOnClick({
  confirmClass:"copy-confirmation",
  confirmText:"\\%c «%c» \\%c"
});
$('#ex5').copyOnClick({
  confirmClass:"copy-confirmation",
  confirmText:"Copied from %i"
});
$('#ex6').copyOnClick({
  confirmTime:1,
  confirmClass:"copy-confirmation",
  confirmText:"copied"
});
                

<button class="copy-alert" data-copy-on-click="This is the copied text">Copy</button>

$('.copy-alert').copyOnClick({
  confirmPopup:function(copied,target,classname,time,txt){
    var s=$.fn.copyOnClick.replaceText(txt,str,"");
    alert(s);
  }
});
                

<button class="copy-static" data-copy-on-click="This is the copied text">Copy</button>

$('.copy-static').copyOnClick({
  confirmPopup:function(copied,target,classname,time,txt){
    if(typeof $.fn.copyOnClick.copyconf!="undefined") { clearTimeout($.fn.copyOnClick.copyconf);}
    $('.copy-confirmation').remove();
    target.after('<div class="copy-confirmation" style="background:#faa;">copied</div>');
    $.fn.copyOnClick.copyconf=setTimeout(function(){$('.copy-confirmation').remove();},1000);
  }
});
                

Examples of customised callbacks

Sometimes you need to be able to process the text you're copying; In fact this is generally a good idea so you trim whitespace at the very least. You may also want additional behaviour on copy, like a more elaborate preview of the copied text, or you may want to simply change the default confirmation popup with a snazzy one of your own. That's what the following two methods are for:

<button class="copy-before-copy" data-copy-on-click="We have 10 items!">Copy</button>

$('.copy-before-copy').copyOnClick({
  confirmClass:"copy-confirmation",
  beforeCopy:function(text,target,self){
    return text.replace(/[^a-z ]/ig,'*');
  }
});

<button class="copy-after-copy" data-copy-on-click="1">Copy</button>

$('.copy-after-copy').copyOnClick({
  confirmClass:"copy-confirmation",
  afterCopy:function(text,target,self){
    var v=parseInt(target.attr("data-copy-on-click"));
    if(!isNaN(v)) {
      v++;
      target.attr("data-copy-on-click",v);
    }
  }
});