Clipboard.js : 移动端浏览器实现网页内容复制

最近在项目中遇到这样一个需求：

 

点击按钮，将指定的URL复制到剪贴板，而后用户能够粘贴到浏览器(Safari为主)自行打开。

 

方案一：zeroClipboard.js

 

 

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

 

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

 

首先想到这个插件的缘由是，以前在PC端的项目中使用过，兼容性很好，得心应手，因此，先用它作了个demo

HTML

<input type="text" name="" id="iUrl" value="https://github.com/zeroclipboard/zeroclipboard">
<button id="copyUrlBtn">复制连接</button>

 

JAVASCRIPT

	(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最新版，也没法实如今移动端浏览器进行文本复制。

 

方案二：Clipboard.js

 

 

 官网地址：https://clipboardjs.com/

 

 兼容性：

 虽然要求Safari版本在10以上，可是做者作了很好的优雅降级：

The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.

 

 也就是说，Safari版本是10以上的，能够直接成功复制；若是是版本小于10，能够经过以下代码提示用户手动复制：

clipboard.on('error', function(e) {
    alert('请选择“拷贝”进行复制!')
});

 

Safari版本在10如下的效果：

在 alert('请选择“拷贝”进行复制!') 以后，待复制的文字会自动选中，而后弹出系统自己的tooltip 

效果以下：

 

 DEMO：

 

HTML：

   <!-- Target -->
    <input id="foo"  value="http://www.968309.com/mobile.php">

    <!-- Trigger -->
    <button class="btn" data-clipboard-target="#foo">复制</button>

 

JAVASCRIPT：

    //init
    var clipboard = new Clipboard('.btn');
    //优雅降级:safari 版本号>=10,提示复制成功;不然提示需在文字选中后，手动选择“拷贝”进行复制
    clipboard.on('success', function(e) {
        alert('复制成功!')
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        alert('请选择“拷贝”进行复制!')
    });

　　

 

 2017/08/25 后续补充：

 

近期不少朋友经过留言和邮件询问我，为何在安卓手机上没法使用Clipboard.js来实现复制？

其实按照本文demo说明，是彻底能够的；

只是不少朋友没有没有把待复制内容放在input输入框里，才致使在安卓手机上没法复制。

 

错误写法：

<p id="foo">这里是须要复制的文本</p>

　　

正确写法：

<input type="text" id="foo" value="这里是须要复制的文本"/>

 

 

 2018/05/14  更新：个人小程序【阳光投票】已上线，欢迎你们体验建议！