Last Updated on 2021-06-08 by Clay
在 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 的區塊進行字串的複製。
顯示的畫面如下：
點擊之後，找個記事本進行貼上：
成功！
您這個方法無法在同一個頁面使用多個HTML，他們全部都會複製最上面第一個的文字!
您好，請問是否有更改過複製區塊 id 呢？
不知道是否方便分享您的程式碼呢？
您好，請問如果複製的區塊的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”)
}
最近因手術住院，可能之後才能有所回覆
var drawIconRow = (formula, category) => {
return `
${formula.class}
formula
Copy
`;
}
// 點擊複製
function copyEvent(id)
{
var str = document.getElementById(id);
window.getSelection().selectAllChildren(str);
document.execCommand(“Copy”)
}
程式碼貼上後，無法完全顯示….
好的，謝謝您，祝早日康復！
也謝謝您的鼓勵。
之所以無法運作，可能是瀏覽器不支援的緣故？
我之後也有使用此程式碼不能運作的例子，後續又紀錄了另外一篇文章，效果比較泛用：
https://clay-atlas.com/blog/2021/03/22/html-cn-copy-string-to-clipboard/?doing_wp_cron=1619002333.4135370254516601562500
希望能給您參考。
您好，請問能加您line之類的聯繫方式嗎？小弟剛踏入此領域…
我要複製的資料是從jQuery裡串接json所產生出來的
由於我個人沒有使用 Line 的習慣 … 實在抱歉。
另外，資料格式若轉為字串，應能適用這篇文章的方法：https://clay-atlas.com/blog/2021/03/22/html-cn-copy-string-to-clipboard