本文介绍几种JQuery 复制内容到剪切板的几种方法：
需求：
点击按钮，将特定的文本内容复制到剪切板上，方便在其它地方进行粘贴。
方法一、
html：(记得引用jquery.js)
<textarea id="copy" style="display:none;"></textarea> <button class="btn btn-primary btn-sm " data-toggle="modal" id="shareQrcode" onclick="copyHtmlLink();" title="复制链接"> <span class='glyphicon glyphicon-copy'></span>复制链接 </button>
js：
/**
* 复制内容
*/
function copyHtmlLink() {
var str= "这是我要复制的内容";
copyText(str);
}
/**
* 将文本内容复制到剪切板
* @param str 复制内容
*/
function copyText(str) {
$('#copy').text(str).show();
var ele = document.getElementById("copy");
ele.select();
document.execCommand('copy', false, null);
$('#copy').hide();
alert('复制成功!');
}方法二、
zclip实现复制内容到剪切板
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.zclip.min.js"></script>
<span id="link" style="display: none;">这里是需要复制的内容：www.cqphp.cn</span>
<span class="tpl-label-info" id="copyBtn" > 提取链接</span>
<script>
$('#copyBtn').zclip({
path: "ZeroClipboard.swf", /* swf文件 */
copy: function(){
return $('#link').html();
},
beforeCopy:function(){
/* 按住鼠标时的操作 */
},
afterCopy:function(){/* 复制成功后的操作 */
layer.msg('复制成功');
}
});
</script>选项
| 选项 | 默认值 | 描述 |
|---|---|---|
| 路径 | 'ZeroClipboard.swf' | 通往ZeroClipboard.swf的路径 |
| 复制 | null | 要复制的字符串或返回要复制的字符串的函数 |
| afterCopy | null | 复制后执行的功能 |
| beforeCopy | null | 复制前执行的功能 |
| clickAfter | true | 将点击事件中继到复制后绑定的元素 |
| setHandCursor | true | 将光标设置为指针 |
| setCSSEffects | true | 添加hover和active类到绑定到的元素 |
方法三：
<script type="text/javascript" src="/Public/js/clipboard.min.js"></script>
<a href="JavaScript:;" id="cp-btn" data-clipboard-text="这里是需要被复制的内容" class="btn btn-sm btn-success">复制</a>
<script type="text/javascript">
var btn=document.getElementById('cp-btn');
var clipboard=new Clipboard(btn);
clipboard.on('success', function(e){
console.log('OK');
console.log(e);
});
clipboard.on('error', function(e){
console.log('error');
console.log(e);
});
</script>附件下载地址：
链接：https://pan.baidu.com/s/1XsocZq6XBmFk7Sq5yxY9Ow
提取码：w8n9