clipboard.js不依赖flash剪切板操作库

大前端

2020-06-29 · 6198

官网地址：http://www.clipboardjs.cn/

CDN：

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

使用方法

new ClipboardJS('.btn');

<!-- 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>

事件

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);
});

浏览器支持

这个库依赖 Selection 和 execCommand APIs. 前者兼容所有的浏览器后者只兼容以下浏览器版本。


Chrome 42+	Edge 12+	Firefox 41+
IE 9+	Opera 29+	Safari 10+