February 24, 2017

使用Clipboard.js在浏览器中实现快速复制功能

Clipboard.js作用

No Flash. No frameworks. Just 3kb gzipped

正如官方介绍，Clipboard.js是一个轻量级，不需要Flash和其他框架的支持，就能轻松复制浏览器中的内容。并且可以使用npm与bower来安装和管理。

与此同时，推荐使用grunt这类自动构建工具来管理项目中的文件。

使用方法

  1. 下载它：

    // 使用npm
npm install clipboard --save
// 或者使用bower
bower install clipboard --save

    当然也可以直接下载它的ZIP包来使用。

  2. 引入脚本，src值需要根据clipboard文件所在路径填写：

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

    实例化一个对象，你可以像使用JQuery选择一样填写括号中的值，但Clipboard.js并不依赖JQuery：

    new Clipboard('.btn')

    到此，你创建对应选择器（例如class="btn"）的HTML元素就可以了。

  3. HTML例子借助上面写的JavaScript代码，完成例子。

     <input id="foo" value="http://lcrun.com" />

 <!--启动按钮-->
 <button class="btn" data-clipboard-target="#foo">点我复制</button>

    这个例子中，点击按钮，将复制文本框内的值。

     <input id="bar" value="http://lcrun.com" />

 <!--启动按钮-->
 <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">点我粘贴</button>

    Clipboard.js支持剪切功能，只需要添加data-clipboard-action属性。

        <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
 点我复制
 </button>

    Clipboard.js支持自我操作，只需要给元素自身添加data-clipboard-text属性。

事件

Clipboard.js自带两个事件，可以轻松调用：

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

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

高级使用

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

通过给target参数传递一个方法，修改所选择的目标HTML元素。

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

通过给text参数传递一个方法，获取指定的目标HTML元素属性名的值。

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

销毁Clipboard.js对HTML元素的绑定。