無法使用：使用Javascript將HTML簽名復制到剪貼板

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之前執行的。 相反，您應該將其包裝在“文檔就緒”事件中：

 $(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標記。