Clipboard.js Reference

This is a brief example of clipboard.js being used.

There are obviously a lot of assumptions that going to this block of code. For instance, I am using Bootstrap and jQuery. But this should be enough to get you on your way.

Clipboard.js is available at https://clibpoardjs.com. And there is a CDN copy available from CloudFlare: https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js.

<!-- Target -->
<div class="col-md-8 col-md-offset-2">
  <pre class="hljs"><code id="copy" class="html">Lorem ipsum dolor sit amet.</code></pre>
</div>
<div class="form form-horizontal">
  <!-- Trigger -->
  <div class="form-group">
    <div class="col-md-offset-2 col-md-8">
      <button class="btn btn-success btn-copy" data-clipboard-target="#copy"><span class="glyphicon glyphicon-copy"></span>  Copy to Clipboard</button>
    </div>
  </div>
  <div class="form-group">
    <label for="paste" class="control-label col-md-2">Paste</label>
    <div class="col-md-8">
      <textarea class="form-control" name="paste" id="paste" rows="25" placeholder="Put the contents of your clipboard here."></textarea>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script>
  $(document).ready(function(){
    new Clipboard('.btn-copy');
  })
</script>