純js實現復制到剪貼板功能

本文轉載自查看原文 2016-04-12 18:42 52862 前端開發/ JavaScript

在網頁上復制文本到剪切板，一般是使用JS+Flash結合的方法，網上有很多相關文章介紹。隨着 HTML5 技術的發展，Flash 已經在很多場合不適用了，甚至被屏蔽。本文介紹的一款JS插件，實現了純JS方法復制文本到剪切板。

插件名是Clipboard.js，該插件不依賴 Flash，而是依賴於最新HTML5推出 Selection API 和 execCommand API。

execCommand 支持以下瀏覽器：Chrome瀏覽器42+，火狐41+，IE9+。Safari目前仍不支持cut和copy指令。

安裝

Github：
https://github.com/zenorocha/clipboard.js

可以通過npm方式安裝：

npm install clipboard --save

或者bower：

bower install clipboard --save

當然，也可以直接下載ZIP包：https://github.com/zenorocha/clipboard.js/archive/master.zip

開始使用

首先需要在頁面引入：

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

示例

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>clipboard示例</title>
    <script src="../dist/clipboard.min.js"></script>
</head>
<body>
    <!--data-clipboard-text屬性的值將會被復制-->
    <div id="btn" class="js-copy" data-clipboard-text="我是被復制的內容啊">
        <span>點擊復制</span>
    </div>

    <script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);//實例化

    //復制成功執行的回調，可選
    clipboard.on('success', function(e) {
        console.log(e);
    });

    //復制失敗執行的回調，可選
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

點擊頁面的點擊復制就可以復制內容到剪切板了，console.log(e)可以打印出里面的內容：

Object {action: "copy", text: "我是被復制的內容啊", trigger: div#btn.js-copy}

用法

從屬性里復制內容

Clipboard.js使用起來非常簡單，默認會復制data-clipboard-text屬性里的值，你可以把需要復制的文本放在里面。

上面我們使用document.getElementById獲取對象，還可以：

//直接通過ID
var clipboard = new Clipboard('#btn');

//直接通過class
var clipboard = new Clipboard('.js-copy');

//直接通過標簽也可以找到
var clipboard = new Clipboard('div');

對於多處需要用到復制功能的：

<div class="js-copy" data-clipboard-text="text1">
<div class="js-copy" data-clipboard-text="text2">
<div class="js-copy" data-clipboard-text="text3">

同樣通過class查找：

//直接通過class
var clipboard = new Clipboard('.js-copy');

我們無需去設置點擊事件。

從另外一個元素復制內容

示例：

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="js-copy" data-clipboard-target="#bar">復制到剪切板</button>

上面的data-clipboard-target="#bar"屬性定義了復制時將復制id="bar"的內容。

當然，也可以在JS里指定：

var clipboard = new Clipboard('.js-copy',{
    target: function() {
        return document.querySelector('#bar');
    }
});

JS里指定復制的內容

<button class="js-copy" data-clipboard-target="#bar">復制到剪切板</button>

<script>
var clipboard = new Clipboard('.js-copy', {
    text: function() {
        return '這里被復制的內容';
    }
});
</script>

將直接復制text里指定的內容。

剪切功能(`cut`)

上面默認都實現了剪切功能。還可以指定是復制(copy)還是剪切(cut)。

在html里指定：

<button class="js-copy" data-clipboard-action="copy">復制</button>
<button class="js-copy" data-clipboard-action="cut">剪切</button>

通過data-clipboard-action屬性指定。

高級選項

你可以設置回調方法供Clipboard使用：

new Clipboard('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

這里的target接受一個回調函數。同樣，text也支持接受一個回調函數。

new Clipboard('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

清理Clipboard對象：

var clipboard = new Clipboard('.btn');
clipboard.destroy();

瀏覽器支持

Clipboard.js 基於 Selection 和 execCommand APIs . 第二個API僅被下面瀏覽器支持：


42+ ✔	41+ ✔	9+ ✔	29+ ✔	Nope ✘

Safari目前還不支持execCommand提供的復制/剪切操作，包括移動端。

其它

一般建議全局初始化Clipboard。全部使用相同的class，如.js-clipboard。

$(function(){
	/*
	 * 復制到剪切板
	 * @see https://github.com/zenorocha/clipboard.js
	 */
	if(typeof Clipboard != 'function'){
		return false; /*避免未引入Clipboard拋錯*/
	}
	
	var clipboard = new Clipboard('.js-clipboard');
        clipboard.on('success', function(e) {
            alert('復制成功');
        });
});