前端实现复制内容

最新推荐文章于 2024-04-26 11:22:00 发布

累了要吃肉丶

最新推荐文章于 2024-04-26 11:22:00 发布

阅读量152

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/qq_43610311/article/details/137022250

版权

本文介绍了如何在前端利用JavaScript的`document.execCommand`方法实现文本复制功能，通过创建临时input元素，设置值，聚焦并执行复制操作，最后移除input元素。

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

前端实现复制需要创建一个input标签；
然后将要复制的内容添加到input里面；
再将焦点定位到input标签上；
调用execCommand进行复制；
document.execCommand 是一个 JavaScript 方法，用于执行与浏览器相关的命令。它可以用于执行一些常见的操作，例如复制、粘贴、选中文本等。
复制后移除创建的input；

copycode(){
	const input = document.createElement('input');
	input.setattribute('value',this.fileUrl);// 将要复制的数据添加到创建的input
	document.body.appendChild(input);// 将input添加到body元素末尾
	input.select();// 处于焦点状态
	document.execCommand('copy');// 复制
	document.body.removeChild(input);// 移除元素// 
	const input = document.getElementById('copy')