How to copy div content to clipboard using jQuery clipboard.js Plugin

on

How to copy div content to clipboard using jQuery clipboard.js Plugin

How to copy div content to clipboard using jQuery clipboard.js Plugin:
Copying text to clipborad is very simple by using clipboard.js, If you have a website and you want to add copy button along with your div/input/texarea content, so that user can easily copy your website content on clipboard then this plugin is quite helpful. Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. just load clipboard.js on page and follow little configuration to copying text to clipboard.

Coping Text To Clipboard

Libraries

Load only clipboard.js on page, all done, you don’t need to include any other third party library.
<script src="clipboard.min.js"></script>

HTML

Below i have created some sample div and input box which data need to copy in clipboard after clicked on copy button. You need to use data attribute tags to pass target div ID which data have to copy see following examples.
  <button class="btn" data-clipboard-action="copy" data-clipboard-target="#div1">Copy</button>
<br/><br/>
<div id="div2">Div content Second</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#div2">Copy</button>
<br/><br/>
<div id="div3">Div content Third</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#div3">Copy</button>
<br/><br/>
<input type="text" value="Input Box Value" id="input1" >
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#input1">Copy</button>

JS

Now call the plugins and Instantiate clipboard.
 <script>
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>




Comments

Post a Comment