怎样使用javascript实现一键复制内容粘贴版
2022-07-25 09:11:05
引言
有时候为了方便用户快速复制页面的内容，一般的做法就是添加一个按钮给用户点击一下就复制下来了，这边使用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;
} h3{
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> <h3>一键复制demo</h3> <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>
实现效果
感谢各位的阅读，以上就是“怎么使用JavaScript实现一键复制内容剪贴板”的内容了。
