先说一下我的整体方案:
clipboard插件实测:在PC端的浏览器(试了mac上的safari,chrome,firefox)可用,iOS 10.3上的safari可用,手机上的微信QQ浏览器能用,安卓手机自带的浏览器以及UC,不可用。所以对不可用的设备,采用弹层,长按手动复制的方法。
这里需要注意一点,当需要获取的 标签 为dispaly:none 的时候
data-clipboard-target
的方式得不到值,可用data-clipboard-text
结合下面的方法。
var getContent=document.getElementById("divContent").innerHTML;
document.getElementById("copy-button").setAttribute("data-clipboard-text", getContent);
代码如下:
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>复制</title>
<style type="text/css">
.show {
display: block;
}
.hidden {
display: none;
}
#divLayer {
background-color: rgba(204, 204, 204, 0.7);
width: 100%;
height: 100%;
position: fixed; /* 用absolute的话,当页面过长,下面的部分不会覆盖。*/
left: 0px;
top: 0px;
}
#centerLayer {
background-color: white;
margin-top: 150px;
width: 100%;
height: 208px;
text-align: center;
}
</style>
<script type="text/javascript">
function showLayer() {
document.getElementById("divLayer").className="show";
}
function closeLayer() {
document.getElementById("divLayer").className="hidden";
}
</script>
</head>
<body>
<div id="divLayer" class="hidden">
<div id="centerLayer">
<div style="height: 20px; padding-top:8px; padding-bottom: 8px;">请长按选中下面虚线框中的内容进行复制:</div>
<div id="showContent" style="border: 1px gray dashed; height: 120px; padding-top: 8px;">
<span id="divContent">hello world!</span>
</div>
<button id="closeButton" onclick="closeLayer()" style="border: 1px gray solid; margin-top: 10px;">点击关闭</button>
</div>
</div>
<button id="copy-button" class="btn" data-clipboard-action="copy" data-clipboard-text="text!">复制</button>
<script type="text/javascript" src="clipboard.min.js"></script>
<script>
//dispaly:none 的时候 data-clipboard-target 得不到值,所以通过下面的方法更改。
var getContent=document.getElementById("divContent").innerHTML;
document.getElementById("copy-button").setAttribute("data-clipboard-text", getContent);
var clipboard = new Clipboard('#copy-button');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection(); //清除选择
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
showLayer();
});
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。