js制作一键复制页面文字功能和给复制内容添加diy注释

编辑:管理员 发布时间:2023-04-25 16:52:30314

在我们浏览的很多网页的页面中,文字段落的周围可以经常见到会有一键复制按钮出现,这是怎样实现的呢?

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文字注释.

TAGS: js web前端
热门文章
最新文章

热门标签

数学计算路径命令行表单字符符号nginxcookiejavapython数组文字处理小数服务器管理apache图片处理