1.ZeroClipboard.js
點擊按鈕實現復制鏈接或者一段文本到剪貼板,這個小功能想必不少人都見過。GitHub上就有這么一個點擊按鈕復制倉庫地址的功能。如下圖所示:
Github
用的是ZeroClipboard來實現這一功能。這個庫是用一個不可見的Flash來完成剪貼操作的。即將 Flash 做成透明的,以便于我們放在諸如鏈接、按鈕等需要放置的任何地方。這樣,用戶界面看起來沒有變化,當點擊鏈接或按鈕時,實際上點擊是卻是 Flash,從而實現復制操作。具體實現方法,可以參考官方文檔http://zeroclipboard.org。
我們知道Flash
正走向沒落,不少功能被越來越強大的HTML5
所替代。而且,出于安全方面的考慮,不少瀏覽器都默認禁用了Flash。那么有沒有不是Flash的實現方式呢?
2.clipboard.js
clipboard.js是個更加輕量的JavaScript庫,沒有使用Flash,而是依賴于Selection和execCommand這兩個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/