有时候为了不便用户疾速复制页面的内容,个别的做法就是增加一个按钮给用户点击一下就复制下来了,这边应用 JavaScript 原生的办法进行设置剪贴板。
代码
copy.html
<!DOCTYPE html>
<html>
<head>
<title> 一键复制 demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
<style type="text/css">
*{
padding:0;
margin:0;
}
h2{
text-align: center;
margin-top: 20px;
}
#neirong{width: calc(90% - 20px);
padding:10px 10px;
margin:20px auto;
background: #eee;
border-radius: 5px;
}
#copy{
border:none;
width: 90%;
height: 45px;
background: #39f;
font-size: 16px;
color: #fff;
font-weight: bold;
border-radius: 5px;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<h2> 一键复制 demo</h2>
<div id="neirong"> 这是内容这是内容这是内容这是内容 </div>
<button id="copy"> 复制 </button>
<script>
function copyArticle(event){const range = document.createRange();
range.selectNode(document.getElementById('neirong'));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
alert("复制胜利");
}
window.onload = function () {var obt = document.getElementById("copy");
obt.addEventListener('click', copyArticle, false);
}
</script>
</body>
</html>
demo
作者
TANKING