【JavaScript】實作網頁一鍵複製內容功能,使用 clipboard.js

3 個月前 |

本篇文章將教您如何在網頁讓使用者快速複製內容!

您的網頁是否需要讓使用者複製內容,這時候可以使用 clipboard.js,我來教一下基本用法

首先下載 clipboard.js (點我下載),解壓縮後資料夾內有一個 dist 資料夾,我們要裡面的 clipboard.min.js,在您的專案目錄新增 js 資料夾,把剛剛的 clipboard.min.js 複製進去。

接下來是程式碼

我們現在網頁  </body> 前輸入以下內容

這是 clipboard.js 的設定!

我先來示範使用 input 的複製範例

buttondata-clipboard-target 是您 input 所設定的 ID (前面要帶 #)
button 中的 class=”copy” 是剛剛在 JavaScript 那邊設定的 (var clipboard = new Clipboard(‘.copy‘);)

下面的範例也都差不多

使用 textarea 的複製範例

只有按鈕的範例

以上是基本的程式碼範例

如果想要在複製成功或失敗時執行某程式碼可以把  new ClipboardJS('.copy'); 改成

教學就到這邊結束,也可以參考一下我的範例專案喔!

GitHub
https://github.com/GoneTone/clipboard.js-demo

範例網頁
https://demo.reh.tw/clipboardJS/


【JavaScript】實作網頁一鍵複製內容功能,使用 clipboard.js - QR Code
本站內容未經授權許可請勿擅自抄襲
如果需引用部分文章內容請註明來源網址

發表時間:2018-04-07 16:12:20
此文章網址:https://blog.reh.tw/archives/351
關於作者
張文相 Zhang Wenxiang 的頭像

張文相 Zhang Wenxiang

我是本站的站長,喜歡 Coding 的一位學生。

張文相 Zhang Wenxiang

我是本站的站長,喜歡 Coding 的一位學生。


分類:教學 程式
標籤:clipboard Copy HTML JavaScript JS 網頁 複製



Facebook 留言