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

Clipboard.js作用

No Flash. No frameworks. Just 3kb gzipped

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

与此同时,推荐使用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元素的绑定。