JavaScript实现一键复制内容剪贴板
更新时间：2022年07月22日 14:45:51 作者：TANKING
这篇文章主要为大家介绍了JavaScript实现一键复制内容，document.execCommand原生JS设置剪贴板的实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
引言
有时候为了方便用户快速复制页面的内容，一般的做法就是添加一个按钮给用户点击一下就复制下来了，这边使用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>实现效果
以上就是JavaScript实现一键复制内容剪切板的详细内容，更多关于JavaScript一键复制内容的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了微信小程序 动态绑定事件并实现事件修改样式的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要为大家介绍了JS作用域作用链及this使用原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
JSON是什么？JSON是JS的一种简单数据格式,JSON是JavaScript原生格式，它是一种严格的js对象的格式，JSON的属性名必须有双引号，如果值是字符串，也必须是双引号2017-03-03
这篇文章主要介绍了微信小程序 video组件详解的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了以JS开发为例详解版本号的作用与价值详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要为大家介绍了JavaScript对象管家Proxy使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家介绍了JS实现羊了个羊小游戏示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了Css-In-Js实现classNames库源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家介绍了javascript字符串单个字符访问方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了关于JavaScript轮播图的实现,下面文章主要是利用利用html 和 css 代码实现轮播图，详细内容请参考下面详细内容，希望对你有所帮助2021-11-11
最新评论