现代化的“复制到剪切板”插件。不包含 Flash

收藏

github地址https://github.com/zeroclipboard/zeroclipboard

 

复制原理:zeroClipboard利用透明的 flash 覆盖在复制按钮上,点击 flash,将复制内容传入到 flash 中,再通过 flash 把传入的内容写到剪贴板上

 

首先想到这个插件的原因是,之前在PC端的项目中使用过,兼容性很好,驾轻就熟,所以,先用它做了个demo

HTML

1
2
复制链接

 

JAVASCRIPT

1
2
3
4
5
6
7
8
9
10
11
(function(){
        var btn = document.getElementById('copyUrlBtn'),
        text = document.getElementById('iUrl'),
        zc = new ZeroClipboard(btn);
    zc.on('beforecopy', function(e){
        zc.setText(text.value);
    });
    btn.onclick = function(){
        alert('已复制');
    }
})();

 

使用zeroClipboard.js需要注意以下两点:

1# ZeroClipboard.swf 和 ZeroClipboard.min.js 需在同一目录结构下, ZeroClipboard.swf无需调用,只需在页面中引用ZeroClipboard.min.js 即可;

2# 测试复制功能需在服务器环境,可以是简单的本地服务器,如:http://localhost:8000/xx

 

测试结果:

在PC端浏览器上测试,功能正常;但是在ios上,无论是QQ浏览器,还是Safari浏览器都无法实现复制功能。

可能由于Flash技术正被各大浏览器厂商冷落,所以,截止到目前ZeroClipboard.js最新版,也无法实现在移动端浏览器进行文本复制。

评论(0条)

请登录后评论