HTML页面-复制按钮使用的示例代码分享
程序员文章站
2022-04-13 21:12:24
...
margin: 0px; padding: 10px 0px 5px; font-size: 14px; color: rgb(37, 37, 37); font-family: arial, "microsoft yahei", 宋体, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">先说一下我的整体方案：
用到了clipboard插件，官方地址和github地址，也可以参考中文说明。
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>
<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">
<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" 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>
以上就是HTML页面-复制按钮使用的示例代码分享的详细内容，更多请关注其它相关文章！
上一篇： Java线程中唤醒notifyAll的操作代码详解
下一篇： 怎么实现链接转换