在我们浏览的很多网页的页面中，文字段落的周围可以经常见到会有一键复制按钮出现，这是怎样实现的呢？
html代码：
<div id="wznr">文字文字的内容~~~</div>
1、点击按钮复制指定div元素中的文字
<input type="button" id="fuzhi" value="复制" />
首先在页面中创建一个id值为fuzhi，名称为"复制"的按钮,用来复制id为wznr元素内的文字内容
然后创建js代码：
<script type="text/javascript">
document.getElementById("fuzhi2").onclick = function () {
const lswz = document.createElement('textarea');
lswz.value = document.getElementById("wznr").textContent;
//lswz.value = tr.eq(2).text();
document.body.appendChild(lswz);
lswz.select();
document.execCommand('copy');
document.body.removeChild(lswz);
alert("已复制");
}
</script>
代码中document.getElementById("fuzhi").onclick=function(){}表示当按钮"fuzhi"被点击时，执行语句.
document.createElement('textarea')新建一个空白的元素textarea，用来临时存放指定的复制内容
然后通过document.getElementById("wznr").textContent获取id为wznr元素中的文字，将其复制给lswz对象.然后在页面中添加，通过对象的.select()属性选中lswz元素中的文本，document.execCommand()方法中的交互方式选择copy复制选中文字到剪切板，当然该方法还可以执行打开、拖动、保存等其它html交互动作,最后删除临时新建的文本框textarea.
2、选中按钮后复制指定div文字内容，添加上自定义的标签注释
代码如下：
<input type="button" id="fuzhi2" value="复制2" />
<script type="text/javascript">
document.getElementById("fuzhi2").onclick = function () {
const lswz = document.createElement('textarea');
lswz.value = document.getElementById("wznr").textContent + "\r\nxxx来自xxxxx链接为:" + location.href;
//lswz.value = tr.eq(2).text();
document.body.appendChild(lswz);
lswz.select();
document.execCommand('copy');
document.body.removeChild(lswz);
alert("已复制");
}
</script>
原理于第一种形式差不多，只不过在给新添加的临时文本框赋值时，添加标签文字"\r\nxxx来自xxxxx链接为:"以及location.href当前的网址链接，然后同样的document.execCommand复制元素选中文字.
3、当没有按钮时，直接使用鼠标右键中的复制时，在原来的选中内容中添加新标签文字
<script type="text/javascript">
document.body.oncopy = function () {
var hqnr = window.getSelection();
var newnr = hqnr + "\r\nxxx来自xxxxx链接为:" + location.href;
window.clipboardData.setData('Text', newnr);
alert("已复制");
}
</script>
document.body.oncopy = function() {}当在页面中复制动作出现时，getSelection()方法获取选择的文字范围与内容，然后window子对象clipboardData其中的setData一个方法，将原本复制的文字整理，重新修改为新的添加过文字注释的内容，这样就可以实现在页面复制文字时，给复制的文本添加新的diy文字注释.