最近在项目中遇到这样一个需求：
点击按钮，将指定的URL/字符串 复制到剪贴板，然后用户可以粘贴到其他地方。
方案一：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：
//ClipboardJS.isSupported() //--------这句为：是否兼容
var clipboard = new Clipboard('.btn');
//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
clipboard.on('success', function(e) {
alert('复制成功!')
e.clearSelection();
});
clipboard.on('error', function(e) {
alert('请选择“拷贝”进行复制!')
//尝试去掉alert，能弹出系统的“拷贝”工具，但是需要点击两次按钮才能弹出，具体原因还不清楚，参考上图。有人说可以试一下在触发的地方写一个空点击事件, onclick="" 因为ios不单纯支持on事件
});
注：参考jq在ios的on事件失效
https://blog.csdn.net/qq_21119773/article/details/53996514
在ios的浏览器中出现一下情况：
绑定document，on事件失效
$(document).on('click','#weixin_btn,#close_box',function(){
})
解决方法1，最后加一行代码，如下
$("body").children().click(function(){})
-============------++++++++++++
解决方法2，
绑定到id（非document）上，on正常使用
$("#orderlist").on('click','.pingjia',function(e){
e.stopPropagation();
e.preventDefault();
})
+++++++++++ 个人参考 ++++++++++++++++++
<script type="text/javascript">
//复制
var clipboard = new ClipboardJS('#btnClipboard', {
target: function() { return document.getElementById('spnYXDHXAccno');}
});
clipboard.on('success', function(e) { NotyGenerate("success", "bottomCenter", "1500", "复制成功！"); });
clipboard.on('error', function(e) { });
$('.panel-warning').find('li').on('click',function() {
var _this = $(this).index();
$(this).addClass('panel-table').siblings().removeClass('panel-table');
$('.panel-cons').find('.panel-con').eq(_this).fadeIn(100).siblings().fadeOut(100);
});
</script>
<script type="text/javascript">
$(document).ready(function () {
//读取浏览器信息
nBrowserType = 5; //其它浏览器
if (IsIphoneOS()) {
nBrowserType = 2; //Iphone 浏览器
if (IsWeiXin()) nBrowserType = 1; //Iphone 微信浏览器
}
else if (IsAndroid()) {
nBrowserType = 4; //Android 浏览器
if (IsWeiXin()) nBrowserType = 3; //Android 微信浏览器
}
$("#hfBrowserType").val(nBrowserType);
$("#hfBrowserValue").val(navigator.userAgent.toLowerCase());
});
$('#btnSubmit').click(function () { return jForm_Check(); });
function jForm_Check() {
if (!/^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/.test($("#tbMoney").val())) {
NotyGenerate("warning", "bottomCenter", "1500", "请输入正确的金额！");
$("#tbMoney").trigger("select");
return false;
}
if (Number($("#tbMoney").val()) <= 0) {
NotyGenerate("warning", "bottomCenter", "1500", "请输入大于 0 的金额！");
$("#tbMoney").trigger("select");
return false;
}
}
</script>
参考链接：
1.官方https://clipboardjs.com/（我使用火狐浏览器打开快点---添加了Decentraleyes这个组件）
2.https://blog.csdn.net/oaa608868/article/details/53539890
3.https://www.huoduan.com/clipboardjs.html
4.https://blog.csdn.net/ximenxiafeng/article/details/54632496
5.https://blog.csdn.net/hzmumu/article/details/79271464
6.https://www.jianshu.com/p/3f8867de041e（中的评论：对于不兼容ios的, 可以试一下在触发的地方写一个空点击事件, onclick="" 因为ios不单纯支持on事件）。
网友评论