将 clipboard.js 与生成的 PHP 输入一起使用答案

【问题标题】：Using clipboard.js with generated PHP input将 clipboard.js 与生成的 PHP 输入一起使用
【发布时间】：2016-04-17 11:58:51
【问题描述】：

我没有使用 JScript 的经验，仅在没有其他选择时才使用它。但我希望我网站的用户可以选择将生成的特定 PHP 代码复制到他的剪贴板中。

我有以下代码

<?php 
    echo'<button class="btn" data-clipboard-text="'. htmlspecialchars("<pre><code>", ENT_HTML5) . $newText . htmlspecialchars("</code></pre>", ENT_HTML5) .'">Copy to Clipboard</button>';
?>
<script src="./clipboard.js"></script>
<script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>

但我在控制台中收到此错误消息：

TypeError：第一个参数必须是 String、HTMLElement、HTMLCollection 或 NodeList

throw new TypeError('第一个参数必须是字符串、HTMLElement、HTMLCollectio...

clipboard.js 的第 152 行

我做错了什么？

【问题讨论】：

标签： javascript php html jscript clipboard.js

【解决方案1】：

您没有将 id 设置为 btn 的按钮，因此 getElementById 将返回 null。

您正在将 null 传递给剪贴板。

【讨论】：