[HTML] 複製任意字串到剪貼簿

Last Updated on 2021-10-17 by Clay

過去我曾經簡單研究過在 HTML 中如何使用 Javascript 進行『字串』的剪貼，但當時找到的方法大部分都是：

• 建立個 TextArea，裡面寫著要複製的文字
• 全選 TextArea 的內容
• 複製進剪貼簿

這樣的流程。

但是今天我需要的是，我不需要建立任何的元件，便能設定我要指定的字串讓使用者複製。本來以為這應該是個簡單的功能，沒想到卻意外地困難。

順帶一提，若是簡單地設定 style="display: none" 是無法複製的。這是因為我們需要全選元件中文字這一步驟，若元件沒有顯示，程式自然無法運行。

所幸最後終於找到適合的方法，也不需要顯示元件。

---

複製方法

<textarea readonly id="copyText" style="position:absolute;left:-9999px">
    It's good!
</textarea>
    <button type="button" onclick="copyEvent('copyText')">COPY</button>

<script>
    function copyEvent(id)
    {
        var str = document.getElementById(id);
        window.getSelection().selectAllChildren(str);
        document.execCommand("Copy")
    }
</script>

Output:

It's good! COPY

我們只需要修改 "It's good!" 中的文字，就能修改複製進剪貼簿的字串。

（註：此方法對 Safari 瀏覽器並沒有效。Safari 得用比較複雜的方法複製）

---

References

• https://www.itread01.com/content/1513087148.html

---

Read More

• HTML 製作『複製』功能的按鈕
• HTML 將區塊當中的文字隱藏
• [Python] 使用 markdown 模組將 markdown 轉成 HTML