用法

官网:http://www.clipboardjs.cn/

1.从另一个元素复制文本
给元素添加data-clipboard-target属性,这个属性的值就是能匹配到另一个元素的选择器

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

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

2.从另一个元素剪切文本
data-clipboard-action 属性来指明你想要复制还是剪切内容
'cut':为剪切, 默认为复制

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

3.从属性复制文本
你可以给目标元素设置一个data-clipboard-text 属性,就可以复制这个属性中的内容

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

事件

我们通过触发自定义事件，比如success 和 error 让你可以设置监听并实现自定义逻辑

var clipboard = new ClipboardJS('.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);
});

高级用法

如果你不想修改 HTML，clipboard还提供了一个非常方面的命令式的 API 给你使用。你需要做的就是声明一个函数，做一些处理，并返回一个值。

例如, 你希望动态设置target, 你需要返回一个node节点.

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

如果你希望动态设置text, 你需要返回字符串。

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

如果在 Bootstrap 模态框（Modals）中使用，或是在其他修改焦点的类库中使用，你会希望将获得焦点的元素设置为 container属性的值。

new ClipboardJS('.btn', {
    container: document.getElementById('modal')
});

同样地，如果你使用单页应用，你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件以及创建的对象。

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

引用方式

npm安装:npm install clipboard --save
直接下载到本地 https://github.com/zenorocha/clipboard.js/archive/master.zip
第三方CDN: https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

jsDelivr
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

cdnjs
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>

RawGit (Deprecated - Will work till October 2019)
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.4/dist/clipboard.min.js"></script>

GitHack (Based on RawGit)
<script src="https://rawcdn.githack.com/zenorocha/clipboard.js/v2.0.4/dist/clipboard.min.js"></script>

unpkg
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>

Statically
<script src="https://cdn.statically.io/gh/zenorocha/clipboard.js/v2.0.4/dist/clipboard.min.js"></script>

浏览器支持

这个库依赖 Selection 和 execCommand APIs. 前者兼容所有的浏览器后者只兼容以下浏览器版本。
Chrome 42+
Edge 12+
Firefox 41+
IE 9+
Opera 29+
Safari 10+
好消息是，如果你需要支持旧浏览器，clipboard.js 可以优雅降级。你所要做的就是在 success 事件触发时提示用户“已复制！”，error 事件触发时提示用户“按 Ctrl+C 复制文字”（此时用户要复制的文字已经选择了）。

你也可以通过运行 Clipboard.isSupported() 来检查浏览器是否支持 clipboard.js，如果不支持，你可以隐藏复制/剪切按钮。

clipboard:一个不依赖flash, 不依赖其他框架的轻量型的拷贝文字插件

用法

事件

高级用法

引用方式

浏览器支持

猜你喜欢