复制主流实现方式
目前copy主流有四种方式:ZeroClipboard.js,Clipboard.js,execCommand
各种复制的区别
ZeroClipboard:兼容性最好,能全面兼容chrome/firefox/ie/safari,但是插件体积大,为230KB。实现方式是flash法,通过加载一个flash,让其访问系统剪贴板来绕过绝大多数系统的权限限制。
Clipboard.js 体积相对小,4KB,兼容性可以接受,兼容chrome/ FF/ IE>9/ Safari新版。
execCommand :兼容chrome/ FF/ IE>9/ Safari新版,execCommand是document方法,是个好东西。
复制实现代码
在这里略过ZeroClipboard.js.
Clipboard.js代码
html:
<p>xxxx:
<span id="receiptNo">${receiptNo}</span>
<span id="copyboard" class="" data-clipboard-target="#receiptNo">复制</span>
</p>
js:
<script src="dist/clipboard.min.js"></script>
if(window.addEventListener && $("#copyboard").length>0){
var clipboard = new Clipboard('#copyboard');
clipboard.on('success', function(e) {
layer.tips('已复制', '#copyboard');
e.clearSelection();
});
}else{
$("#copyboard").click(function(){
alert("复制功能不支持IE9以下版本,请手动复制!");
});
}
execCommand代码
html
<span class="copy" @click="copyToClipBoard()">复制</span>
<input type="text" id="copyLink" disabled="disabled" value=" ">
js
// 复制到粘贴板
copyToClipBoard: function() {
$("#copyLink").attr({
value: this.receiptNo,
disabled: false
});
document.getElementById("copyLink").select();
document.execCommand("copy", false, null);
$("#copyLink").attr({
value: ' ',
disabled: true
});
layer.tips('复制成功', '.copy', {
tips: [1, '#12a4e5'],
time: 2000
});
},