JavaScript實現復制內容到剪貼板的功能

1.ZeroClipboard.js

點擊按鈕實現復制鏈接或者一段文本到剪貼板,這個小功能想必不少人都見過。GitHub上就有這么一個點擊按鈕復制倉庫地址的功能。如下圖所示:

Github用的是ZeroClipboard來實現這一功能。這個庫是用一個不可見的Flash來完成剪貼操作的。即將 Flash 做成透明的,以便于我們放在諸如鏈接、按鈕等需要放置的任何地方。這樣,用戶界面看起來沒有變化,當點擊鏈接或按鈕時,實際上點擊是卻是 Flash,從而實現復制操作。具體實現方法,可以參考官方文檔http://zeroclipboard.org

我們知道Flash正走向沒落,不少功能被越來越強大的HTML5所替代。而且,出于安全方面的考慮,不少瀏覽器都默認禁用了Flash。那么有沒有不是Flash的實現方式呢?

2.clipboard.js


clipboard.js是個更加輕量的JavaScript庫,沒有使用Flash,而是依賴于SelectionexecCommand這兩個API,并且使用了HTML5的特性,比如自定義數據的data-* 屬性。因此,clipboard.js在兼容性方面比ZeroClipboard.js差,但現代瀏覽器(IE9+)基本能夠兼容。

使用方法非常簡單:

1)下載代碼,并引入到文件中。

<script src="dist/clipboard.min.js"></script>

2)實例化一個Clipboard對象,參數可以是CSS選擇器HTML節點、NodeList對象

參數為CSS選擇器

new Clipboard('.btn'); // btn為DOM元素的class名, 跟jQuery的用法一樣。

參數為HTML節點

var btn = document.getElementById('btn');
var clipboard = new Clipboard(btn);

參數為NodeList對象

var btns = document.querySelectorAll('button');
var clipboard = new Clipboard(btns);

3)實例化對象的時候,可以同時設置復制的內容:

var clipboard = new Clipboard('.btn', {
    text: function() {
        return 'to be or not to be'; //剪貼板上的文本
    }
});

4)也可以通過data-*屬性來設置要復制的內容

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">點擊復制</button>

<script>
    var clipboard = new Clipboard('.btn');
</script>

點擊一下,看看是否成功復制到剪貼板:

data-clipboard-target屬性的值#foo對應的是目標節點的CSS選擇器。

5)更多的配置信息和使用方法,請查閱clipboard.js官網,有興趣的朋友,應該看看它的源碼。

注意我說的看源碼,指的是src目錄的代碼。

代碼是長這樣的。沒錯,這是ES6的寫法。

千萬不要去看dist下的clipboard.js ,那個是編譯之后的代碼。

本文首發于Frank Wang的個人博客, 轉載時請附上原文鏈接http://www.wangxingfeng.com/copy2clipboard/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容