clipboard.js-纯JS实现复制内容到剪贴板上,无Flash

clipboard.js-纯JS实现复制内容到剪贴板上,无Flash

更新: 2018-07-2

来源:clipboardjs.com

阅读:190

开源:GitHub

在谷歌Chrome、微软Edge 和苹果 Safari 等都陆续宣布停止支持Flash插件的情况下,clipboard.js 实现了纯JS复制到剪贴板,无Flash, 压缩后只有3KB大小,还无需要依赖第三方库。

安装

你可以通过 npm 来安装它。

npm install clipboard --save


如果你不使用包管理,仅需要下载一个ZIP 文件。

使用方法

1.HTML代码

<button class="btn">点击复制</button>

2.引用clipboard.js

<script src="dist/clipboard.min.js"></script>
3.然后你需要通过传入一个DOM选择器或HTML 元素, 或者 HTML 元素数组作为参数,来实例化对象。
new Clipboard('.btn');

实例1代码:


    <button class="btn">点击复制</button>
    <script src="dist/clipboard.min.js"></script>
    <script>
    var clipboard = new ClipboardJS('.btn', {
        text: function() {
            return '复制的内容';
        }
    });
    </script>
以上就是基本实现了点击复制内容的功能了。这就结束了吗?当然没有


clipboard.js 还支持HTML5的DATA属性来提高可用性

data-clipboard-targe --- 从另一个元素复制或剪切文本

data-clipboard-action  --- 属性来指明你想要复制还是剪切内容。默认为 (copy)

实例2代码:


<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo" data-clipboard-action="copy">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
以上码会实现复制 input 中的 value值。

另外需要知道的是 data-clipboard-action 属性为剪切(cut)时只支持对 input 和 textarea 元素的内容剪切。

参数

  • container:设置获得焦点的元素
    //如果在 Bootstrap 模态框(Modals)中使用,或是在其他修改焦点的类库中使用。
    //你会希望将获得焦点的元素设置为 container 属性的值。
    new Clipboard('.btn', {
        container: document.getElementById('modal')
    });

方法

  • destroy():清理事件以及创建的对象
    var clipboard = new Clipboard('.btn');
    clipboard.destroy();

事件

  • success:触发success事件
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
    
        e.clearSelection();
    });
  • error:触发error事件
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

热门推荐