将 clipboard.js 与生成的 PHP 输入结合使用

Question

我没有使用 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: First argument must be a String, HTMLElement, HTMLCollection, or NodeList

throw new TypeError('First argument must be a String, HTMLElement, HTMLCollectio...

第 152 行 clipboard.js

我做错了什么？

Answer 1

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

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

将 clipboard.js 与生成的 PHP 输入结合使用

Using clipboard.js with generated PHP input

html

javascript

php

jscript

clipboard.js