copy innerHLM of div using clipboardjs

myyis
myyis used Ask the Experts™
on
Hi everybody,
I need to copy the content of the div to the desktop when clicked the div using https://clipboardjs.com/

<div id="id1" onclick="copy_content_to_clipboard(this);">
Textttttt
</div>

Anybody can help me?
Thank you.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2013
Awarded 2012
Commented:
Hi,
here we go - no need to do the onclick handler:
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
  </head>

  <body>
    <!-- 1. Define some markup -->
    <div id="myCopySource" style="border: 2px solid" data-clipboard-action="copy" data-clipboard-target="#myCopySource"><h1>Inner Heading</h1><br/><span>And a span is also in here.</span></div>
    <!-- 2. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard("#myCopySource");
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
  </body>

</html>

Open in new window


Live sample:
http://embed.plnkr.co/vrqHBavtmDLLgqTWMtUe/

HTH
Rainer

Author

Commented:
Thank you very much for your quick answer. I have 2 questions:

1. How is it working for  "onclick" without an onclick script, if I want to make it onmouseover, what shall I do?

2.  At the examples here https://clipboardjs.com/ when you click the copy button you see a small confirmation pop-up. How can turn this on?
Most Valuable Expert 2013
Awarded 2012

Commented:
Hi,
1: thats because the constructor implements the onclick listener.
For an onmouseover you might track that event and fire a click event on the same element. But not sure if this makes sense (from an user perspective).

2: Because they implemented additionally a showTooltip function
showTooltip(e.trigger, 'Copied!');

Open in new window

but only on buttons with the class "btn".

HTH
Rainer

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial