不工作：使用 Javascript 将 HTML 签名复制到剪贴板

Question

如何让 "copy to clipboard" 按钮对 HTML + Javascript 的结果起作用？我阅读了不同的帖子并尝试了这个，但它对我不起作用：

<button type="button" id="copy-button" data-clipboard-target="#copy">Copy</button>
<script>
 (function(){
    new Clipboard('#copy-button');
})();
</script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script>

目标是创建一个电子邮件签名工具 - 完成字段，按复制按钮并将其粘贴到您的电子邮件客户端的签名创建器中。

完整代码如下：https://jsfiddle.net/t7y5uq89/

（对于在一个文件中混用 HTML+Javascript 提前致歉 -- 我是一名自学成才的编码员）

Answer 1

您正在自调用函数中调用 new Clipboard，该函数将不起作用，因为它是在加载 DOM 之前执行的。相反，您应该将其包装在 "document ready" 事件中：

$(function() {
    new Clipboard('#copy-button');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>

<button type="button" id="copy-button" data-clipboard-target="#copy">Copy</button>

<div id="copy">
    <h1>John Foo</h1>
</div>

我也想批评你的 HTML 标记：

你的代码中基本上没有语义。例如，您应该使用 <label> 标签来指示输入标签，而不是 <b> 标签（已弃用十多年）。
您应该指定一种全局字体，而不是在每个标签上重复自己。这很简单：
```
body {
    font: 12px 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
```
另请注意，带空格的字体名称需要用引号括起来。
不要使用内联样式。
不要将 HTML 与 Javascript 混用。为什么？为了代码的可维护性，并使其更易于阅读。这很可能是没有人花时间回答您的问题的原因。
正确关闭您的 HTML 标签。

不工作：使用 Javascript 将 HTML 签名复制到剪贴板

Not working: Copy HTML signature to clipboard with Javascript

html

javascript

jquery

clipboard.js