新手入門，程式語言小白的紀錄：
如何在部落格中設置一個陽春版的文字複製按鈕？
安裝
打開網站原始碼，將下列語法置於</head>。若使用Pixnet測試，將它置於文章內原始碼開頭。
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
複製內文區塊
此段語法，置於文章原始碼，包含複製內容及按鍵的顯示名稱。
<p id="text1">想複製的段落或文字內容</p> <button class="btn" data-clipboard-target="text1">按鈕上顯示的字</button>
若同文章頁面內有數段想複製的內容時，只需再命名新的id名。
如語法內id="text1"，data-clipboard-target="text1"
於複製的第二段落，可自行命名，
如id="ooo"，data-clipboard-target="ooo"也必須對應修改。
JavaScript
下方語法放置在網頁程式碼</body>之前。若使用Pixnet測試，將它置於文章內原始碼最尾端。
<script>
var btns = document.querySelectorAll('button');
var clipboard = new ClipboardJS(btns);
clipboard.on('success', function (e) {
console.log(e);
});
clipboard.on('error', function (e) {
console.log(e);
});
</script>
範例成果
想複製的段落或文字內容
Just Try It
其他
- 測試區
- 按鈕複製內容
文章標籤
全站熱搜
留言列表
遊戲 (9)
