Zeroclipboard 与 php 和多个元素答案

【问题标题】：Zeroclipboard with php and multiple elementsZeroclipboard 与 php 和多个元素
【发布时间】：2015-07-04 06:01:29
【问题描述】：

所以我希望能够复制网页上有多个元素。根据 API 发回的内容，这些元素使用 php 输出。我已经尝试了 2 天来让它工作，但我似乎看不出我的代码有什么问题。

这是去掉了所有不重要的东西的代码

<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="js/ZeroClipboard.js"></script>
<script src="js/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/sweetalert.css">
<script type="text/javascript">

var clipboard = new ZeroClipboard(document.getElementById("copy"));

clipboard.on("ready", function(readyEvent) {
    clipboard.on("aftercopy", function(event) {
      sweetalert({
          title: "See you soon!",
          text: "Copied " + event.data["text/plain"],
          type: "success",
          showConfirmButton: false,
          timer: 2000
      });
    });
});
</script>

  <?php
    echo "<button class='btn btn-success' id='copy' data-clipboard-text='". $element ."'><i class='fa fa-copy'> </i> Copy</button>";
  ?>

【问题讨论】：

零剪贴板仍然是唯一或多或少可靠的方法。新的 html5 clicpboard api 仍然没有足够可靠地实现来使用它。但是请注意，零剪贴板需要在客户端浏览器中安装闪存，这种情况越来越少。它还使用了可能在当天关闭的安全漏洞......
那么 Flash 电影是放在按钮上的吗？您可以通过右键单击按钮进行检查。您还应该检查您的浏览器开发控制台是否有任何 javascript 错误。
哦，我刚刚看到的另一件事：您显然没有 htmlescape() 在您的按钮定义中注入 $element 值。这可能会破坏您的标记，具体取决于内容。
如何将 Flash 电影放在按钮上？
在初始化元素时（应该）由 zeroclipboard 按钮完成。如果没有，那为什么它不起作用？也许您的浏览器中没有安装闪存？还可以尝试将 clipboard 变量转储到您的 javascript 控制台中，以查看初始化是否有效。

标签： php copy clipboard zeroclipboard

【解决方案1】：

你不能使用 PHP，像这样使用 javascript：

function ClipBoard(id) {
    youobj = document.getElementById(id);
    holdtext.innerText = youobj.innerText;
    therange = holdtext.createTextRange();
    therange.execCommand("RemoveFormat"); 
    therange.execCommand("Copy");
}

【讨论】：

【解决方案2】：

好的，所以我能够对此进行修复！这比我想象的要容易得多。我为每个要复制的元素使用了一个类，但我仍然为每个元素使用相同的 ID，并包含 data-clipboard-text 标签。所以最终的代码是这样的

//This Will load the lib
<script src="js/zeroclipboard.js"></script>
//This is the script. I should probably but it in its own .js file.
<script>
//Loading it with the document ready function meant that I wont have any
//Errors to do with the initialization of it.
  $(document).ready(function() {
//This makes a new var called clipboard and it will look for the class called "copyclass".
//If you try to find elements via ID it will not be able to because you can only
//use ID's with the same name once.
    var clipboard = new ZeroClipboard($('.copyclass'));

      clipboard.on("ready", function(readyEvent) {
        clipboard.on("aftercopy", function(event) {
//Simple JS alert.
          alert("Worked!");
        });
      });
    });
</script>

<?php
//The data which is sent to be used for the clipboard is then dyncamically assigned using
//PHP for the data-clipboard-text.
echo  "<td><button class='copyclass' id='copy' data-clipboard-text='". $element ."'><i class='fa fa-copy'> </i> Copy</button> </td>";
?>

【讨论】：