ZeroClipboard：编程 setText() 不起作用答案

【问题标题】：ZeroClipboard: programmatic setText() does not workZeroClipboard：编程 setText() 不起作用
【发布时间】：2013-07-30 10:11:22
【问题描述】：

我正在尝试让 ZeroClipboard API 工作，但看起来 setText() 函数没有效果。

提供的简单示例 >here

<html>
<body>
<script type="text/javascript" src="/resources/ZeroClipboard.js"></script>

<button id="my-button">Copy to Clipboard</button>

<script language="JavaScript">

    ZeroClipboard.setDefaults({ moviePath: "/resources/ZeroClipboard.swf" });

    var clip = new ZeroClipboard( $("button#my-button") );

    clip.setText('This will be copied into the clipboard'); //this should be in my clipboard, but it is not...

</script>
</body>
</html>

非常感谢

【问题讨论】：

标签： clipboard zeroclipboard

【解决方案1】：

由于安全问题，Flash 无法访问剪贴板，除非该操作源自对 Flash 对象的单击（或用户交互）。

因此，仅调用 clip.setText 将永远无法工作。即使从随机按钮的 onclick 处理程序调用它也不起作用，因为它不是对 flash 对象的点击。

就是这样。

ZeroClipboard 所做的是“粘合”或向您感兴趣的对象添加不可见的 flash 元素。当您单击该元素时，您不会触发该元素的正常 javascript onclick，而是触发 flash 视频的 onclick事件。

希望这是有道理的。

所以要将ZeroClipboard“粘合”到元素上，您可以照常做，这是正确的，或者您可以调用：

clip.glue(element);

你可以粘到多个元素上没问题。

所以要设置文本，动作必须源自对 Flash 对象的点击。根据文档，有三种方法可以做到这一点。

使用数据剪贴板文本

您可以将按钮的“data-clipboard-text”属性设置为您喜欢的任何文本，这将被自动复制。

例如，对于您的示例（复制“复制此文本！”）：

<button id="my-button" data-clipboard-text="copy this text!">Copy to Clipboard</button>

使用数据剪贴板目标

或者您可以将“data-clipboard-target”设置为任何元素的 id，ZeroClipboard 会尝试获取该元素的 innerText；

例如（复制“复制到剪贴板”）

<button id="my-button" data-clipboard-target="my-button">Copy to Clipboard</button>

使用 dataRequested 事件

最后，您可以在回调中复制文本。如果这两个属性都没有设置，那么 dataRequested 回调将被调用，您可以在其中将文本设置为您想要的任何内容。

例如（复制“在回调中设置文本...”）

<html>
<body>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="zc/ZeroClipboard.js"></script>
<button id="my-button">Copy to Clipboard</button>

<script language="JavaScript">

    ZeroClipboard.setDefaults({ moviePath: "zc/ZeroClipboard.swf" });

    var clip = new ZeroClipboard( $("button#my-button") );

    clip.on( 'dataRequested', function ( client, args ) {

        clip.setText("Setting the text in a callback...");

        // Don't make this mistake, alert seems to prevent it from working
        // alert("Clipboard should be set from click on " + this.id);
    });

    // Will never work
    // clip.setText('This will be copied into the clipboard'); //this should be in my clipboard, but it is not...

</script>
</body>
</html>

由于某种原因，在回调中粘贴警报会停止它对我的工作，所以请注意它。

结论

因此请注意，在所有三个示例中，复制事件都来自对 flash 对象的单击。据我所知，没有用户交互，没有办法仅从 javascript 复制它。

有关更多信息，请查看 ZeroClipboard 说明：https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md

【讨论】：

这是否意味着如果DOM元素上没有“data-clipboard-text”或“data-clipboard-target”元素，copy方法将无法以编程方式将文本设置到剪贴板?另外，我在哪里可以找到有关“dataRequested”事件的更多文档。说明中没有显示。
我写这个答案已经有一段时间了，从那时起看起来很多事情都可能发生变化。似乎“dataRequested”现在只是“复制”，还有一个“复制后”事件。自从我使用 zeroclipboard 已经很长时间了，但是在说明页面上有一些信息。 github.com/zeroclipboard/zeroclipboard/blob/master/docs/…关于“data-clipboard-text”或“data-clipboard-target”问题，我不确定100%，但我猜如果两者都没有设置并且回调没有设置，那么它将没有任何设置在剪贴板中。也许它会清除剪辑。