使用clipboard實現前端頁面復制到粘貼板的功能

Astrian 發布于2019-08-21 16:01 / 942人閱讀

摘要：最近公司需要做一個實現復制的功能，本來以為會是很簡單兩三行代碼的事，后來發現網上說的那些原生實現復制的方法很多瀏覽器因為安全的原因都不支持了，嘗試了很長時間，還是死心了，決定使用第三方的庫。

最近公司需要做一個js實現復制的功能，本來以為會是很簡單兩三行js代碼的事，后來發現網上說的那些原生js實現復制的方法很多瀏覽器因為安全的原因都不支持了，嘗試了很長時間，還是死心了，決定使用第三方的js庫。
最先看了利用flash技術的ZeroClipboard，體積龐大不好用放棄了。
最終選擇了不依賴flash輕量級js庫clipBoard，官網地址https://clipboardjs.com/

使用很簡單
第一步：引入js庫
第二步：定義標簽（一般是觸發復制的按鈕）
第三步：實例化clipboard，調用構造函數var clipboard = new Clipboard(".btn");

結合官方給的demo看一下幾種場景

1.從變量賦值內容到剪貼板

var clipboard = new Clipboard(".btn", {
        text: function() {
            return "to be or not to be";
        }
    });

點擊button，"to be or not to be"會粘貼到剪貼板

2.復制頁面中div/input/textarea的內容

第一種方法構造函數里定義target

hello
var clipboard = new Clipboard(".btn", {
        target: function() {
            return document.querySelector("div");
        }
    });

點擊button，"hello"會粘貼到剪貼板

還有第二種方法在button里定義屬性data-clipboard-target和data-clipboard-action

hello

var clipboard = new Clipboard(".btn");

同樣的，點擊button，"hello"會粘貼到剪貼板

input和textarea用法類似

hello

最重要的一點clipboard還定義了復制成功/失敗的回調函數，方便我們去處理后面的邏輯

clipboard.on("success", function(e) {
        console.log(e);
    });

clipboard.on("error", function(e) {
        console.log(e);
    });

完。

云服務器 GPU云服務器 js手機復制粘貼功能 js復制到粘貼板 asp 復制到粘貼版復制粘貼到云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88329.html

H5復制粘貼雙端適配的解決方案（終極版）

摘要：前言最終適配所有機型的方案基于官網這個庫由幾個不同的提供商托管。提供的復制失敗的方法，進行復制失敗提示復制失敗請手動選擇復制。上其他相關分享使用實現前端頁面復制到粘貼板的功能中配合實現點擊按鈕復制內容到剪切板前言最終適配所有機型的方案基于clipboardjs官網https://clipboardjs.com/ 這個庫由幾個不同的CDN提供商托管。選擇你最喜歡的：）建議使用 v...

keithyau 2019-08-22 16:10 評論0 收藏0
成功破解Python領域的世界未解之謎后，輕松完成UI自動化控制微信發送文件

摘要：前面我在自動化控制版微信該系列文中更新了控制微信發送圖片的方法。根據部分群友實際工作的需要，本文將分享如何控制微信發送文件。接下來我將破解這個領域的世界未解之謎，彌補無人完成這個功能的缺陷。 ...

jayce 2021-10-08 10:05 評論0 收藏0
vue 2.x項目 vue-qriously 生成二維碼并下載、cliploard復制粘貼

摘要：近日，重構項目某一老模塊時，有一個功能是生成二維碼并下載，還可以復制鏈接。先想著新模塊中是否有生成二維碼的插件，看了下。項目中封裝了一個指令。一份用來顯示的。順帶說一下，復制粘貼復制粘貼老模塊中是用的倉庫。近日，重構項目某一老模塊時，有一個功能是生成二維碼并下載，還可以復制鏈接。列表每項都有二維碼、下載二維碼和復制鏈接和列表上方總的二維碼。老模塊是用的qrocode中文文檔，qrco...

littlelightss 2019-08-22 17:16 評論0 收藏0
[譯] 復制文本到剪切板的clipboard.js使用方法

摘要：為什么復制文本到剪貼板應該不難。在內部我們需要獲取所有匹配的元素選擇器并且為它們每一個添加上事件偵聽器。因為這個原因我們使用事件代理通過一個偵聽器取代了多個事件監聽器。從另一個元素復制文本常見的用例是復制另一個元素的內容。工作中需要使用到的一個復制插件，使用簡單兼容性還行，因為沒找到中文版介紹就自己翻譯一下，水平有限，不一定全按文章走，如果有問題歡迎指正！！為了更加直觀的展示用法,略...

itvincent 2019-08-26 10:29 評論0 收藏0