2

I'm trying to use zeroclipboard 2.2.0.

<!DOCTYPE html>
<html>
<head lang="en">
    <script src="bower_components/zeroclipboard/dist/ZeroClipboard.js"></script>
</head>
<body>

<div id="first">1111111</div>
<div id="second">2222222222</div>

<button id="d_clip_button" class="my_clip_button" data-clipboard-target="first">Copy from first div</button>
<button data-clipboard-target="second">Copy from second div</button>
</body>
</html>

But it is not working for me. Could you point at mistake? I cannot find proper examples because they are quite oudated.

If you can suggest any alternative to zeroclipboard I will consider it.

Taras Hupalo
  • 1,337
  • 2
  • 16
  • 29
  • 1
    I think, you need `input/textarea` elements where we can paste the copied text. You are using `div`. Try replacing the `div` by `textbox` – Tushar May 26 '15 at 14:14
  • Hmm, seem that it should work with divs as well. See [line #996 in ZeroClipboard.js](https://github.com/zeroclipboard/zeroclipboard/blob/master/dist/ZeroClipboard.js#L996) (it's quite long, scroll it) – Taras Hupalo May 26 '15 at 14:29

2 Answers2

1

This works for me:

<div id="first">1111111</div>
<div id="second">2222222222</div>

<button id="button1" data-clipboard-target="first">Copy from first div</button>
<button id="button2" data-clipboard-target="second">Copy from second div</button>

<script>
    var zeroClipboard = new ZeroClipboard();
    zeroClipboard.clip(document.querySelector("#button1"));
    zeroClipboard.clip(document.querySelector("#button2"));

    zeroClipboard.on('copy', function(event) {

    });
</script>
Taras Hupalo
  • 1,337
  • 2
  • 16
  • 29
0

I didnt use that, if you want, here a code without zeroclipboard 2.2.0.

HTML

<div id="first">1111111</div>
<div id="second">2222222222</div>


<button onclick="copyToClipboard('#first')">Copy from first div</button>
<button onclick="copyToClipboard('#second')">Copy from second div</button>

JS:

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}