純js實現複製到剪貼板功能

時間 2019-12-13

標籤實現複製剪貼板功能欄目 JavaScript 简体版

原文原文鏈接

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

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

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

安裝

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

能夠經過npm方式安裝：瀏覽器

npm install clipboard --save

或者bower：函數

bower install clipboard --save

固然，也能夠直接下載ZIP包：https://github.com/zenorocha/clipboard.js/archive/master.zipspa

開始使用

首先須要在頁面引入：插件

<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)能夠打印出裏面的內容：code

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

用法

從屬性裏複製內容

Clipboard.js使用起來很是簡單，默認會複製data-clipboard-text屬性裏的值，你能夠把須要複製的文本放在裏面。htm

上面咱們使用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('複製成功');
        });
});