纯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('复制成功');
        });
});