Skip to content

[HTML] 製作『複製』功能的按鈕

在 HTML 當中，我一直很想要撰寫一個複製某個『區塊』文字的按鈕，這能很好地幫助我正在開發的某個專案。故此，今天研究了一下，順手紀錄了起來。

實做的方法也相當簡單，只需要事先設定好『要複製區塊』的 ID 即可，以下便來進行簡單的示範。

範例

<p id="copy">This is the copy string!</p>
<button type="button" onclick="copyEvent('copy')">Copy</button>

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



最上方的區塊、也就是 id=”copy” 的區塊，就是我預計要複製的文字 “This is the copy string!”。下方則是一個簡單的按鈕，按下後觸發的便是下方 JavaScript 的腳本。

在 JS 當中我定義了一個 copyEvent() 的函式，主要便是對應特定 ID 的區塊進行字串的複製。

顯示的畫面如下：

點擊之後，找個記事本進行貼上：

成功！

Tags:

10 thoughts on “[HTML] 製作『複製』功能的按鈕”

  1. 林澄育
    Reply

    您這個方法無法在同一個頁面使用多個HTML，他們全部都會複製最上面第一個的文字!

  3. Ian
    Reply

    您好，請問如果複製的區塊的id名稱都一樣，有甚麼方法可以讓它依區塊複製不同的文字?因為我的區塊是由js抓json資料所自動產生的
    var drawIconRow = (formula, category) => {
    return `

    ${formula.class}
    formula

    Copy

    `;
    }

    // 點擊複製
    function copyEvent(id)
    {
    var str = document.getElementById(id);
    window.getSelection().selectAllChildren(str);
    document.execCommand(“Copy”)
    }

  5. Ia
    Reply

    var drawIconRow = (formula, category) => {
    return `

    ${formula.class}
    formula

    Copy

    `;
    }
    // 點擊複製
    function copyEvent(id)
    {
    var str = document.getElementById(id);
    window.getSelection().selectAllChildren(str);
    document.execCommand(“Copy”)
    }

  9. Ian
    Reply

    您好，請問能加您line之類的聯繫方式嗎？小弟剛踏入此領域…
    我要複製的資料是從jQuery裡串接json所產生出來的

Leave a Reply