Question

如何使“复制到剪贴板”按钮适用于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之前执行而无法正常工作。相反，你应该把它包装在＆＃34;文件准备好的＃34;事件：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我还想批评你的HTML标记：

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

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

1 个答案: