JavaScript将内容复制到剪切板,无需导入插件

最新推荐文章于 2024-06-25 08:39:58 发布

时间辜负了谁

最新推荐文章于 2024-06-25 08:39:58 发布

阅读量411

点赞数

分类专栏： JavaScript 文章标签： HTML JavaScript快速复制

本文链接：https://blog.csdn.net/kpchen_0508/article/details/118435168

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用JavaScript纯原生代码操作DOM来实现在网页上复制文本的功能，包括创建临时输入节点、选中文本并执行复制命令，以及针对特定输入元素的复制方法。示例代码展示了如何复制页面上的icon路径，并提供了复制提示信息。

摘要由CSDN通过智能技术生成

JavaScript操作DOM实现的,不需要导入其他插件

可以通过javascript来快速实现页面数据复制，然后粘贴到其他地方

1、标题创建节点的方法实现复制

var el= document.createElement("input");//创建input节点
document.body.appendChild(el);//将节点添加到body
el.setAttribute("id", "el_id");//为input节点添加id,用来查到此节点
document.getElementById("el_id").value = str;//将需要复制的字符串赋值到input的value中
el.select(); 	//选中文本(关键一步)
document.execCommand("Copy");//执行浏览器复制功能(关键一步)
document.body.removeChild(el);//复制完成后删除节点

2、获取页面中的节点实现复制(仅限input和textarea框)

document.getElementById("copyInput").select(); //根据ID选择器获取节点,获取之后使用select选中文本
document.execCommand("Copy"); //执行复制功能

3、示例

icon路径：<span id="iconPath">D:\work\tools\web\ui\images\icon</span>  <button  onclick="copyUrl();">复制</button><span id="copyUrlTip" style="color: red;margin-left: 10px;"></span>

 // 复制icon路径
 function copyUrl(){
     var txt_res = document.getElementById("iconPath");
     
     var el= document.createElement("input");//创建input节点
     document.body.appendChild(el);//将节点添加到body
     el.setAttribute("id", "el_id");//为input节点添加id,用来查到此节点
     document.getElementById("el_id").value = txt_res.innerHTML;//将需要复制的字符串赋值到input的value中
     el.select(); 	//选中文本(关键一步)
     document.execCommand("Copy");//执行浏览器复制功能(关键一步)
     document.body.removeChild(el);//复制完成后删除节点

     document.getElementById("copyUrlTip").innerHTML = "已复制好，可贴粘。";

 }