您的位置:首页 > Web前端 > JavaScript

通过JS+H5实现复制内容到剪贴板上

2016-09-20 18:14 387 查看
       目前很多实现剪贴板复制操作是通过flash+js实现的,但是随着各个浏览器厂商屏蔽flash后,这种方法不再是可行的。由于Html5提供了剪贴板操作事件,我们可以通过Hhtml5的提供的oncopy,oncut,onpaste三个事件实现上述功能。



     github上有一个开源的基于上述方法实现的插件clipboardjs(https://clipboardjs.com/)。他可以实现复制,剪切,黏贴操作。具体调用如下:

<div>hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
<script src="clipboard.min.js"></script>
<script>
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);
});
</script>




      还不错,以上的几个事件各大厂商都支持。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息