前端实现点击复制内容到粘贴板功能

Document.execCommand()

Document.execCommand()是操作剪贴板的传统方法,各种浏览器都支持。

复制时,先选中文本,然后调用document.execCommand('copy'),选中的文本就会进入剪贴板。

当需要选中的内容是文本输入标签(input、textarea)

如果是文本输入标签,标签不可以赋予disable或者readonly,这会影响select()方法

javascript 复制代码
const input = document.querySelector('#input'); // 选取input元素
input.select(); // 选中文本
document.execCommand('copy'); // 执行浏览器复制命令
this.$message.success("已复制到粘贴板!");

当需要选中的内容不是文本输入标签(input、textarea)

需要主动创建一个可输入文本的标签(input和textarea)然后将待复制的文本赋值给这个标签,再调用.select()方法选中这个标签才能继续执行

javascript 复制代码
const input = document.createElement("input"); // 新增一个input
input.style.position = "relative"; // 将它隐藏(注意不能使用display或者visibility,否则粘贴不上)
input.style.zIndex = "-9";
document.body.appendChild(input); // 追加
input.value = copyContent; //copyContent为需要复制的内容   设置文本框的内容
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
this.$message.success("已复制到粘贴板!");
相关推荐
u0111026756 分钟前
图片处理接口如何统一错误信息 前端提示与后端错误码设计
前端·状态模式
福兮说20 分钟前
浏览器里把 iPhone 的 HEIC 转成 JPG:Chrome 解不开、转完大了七成、拍摄时间全丢,六个坑实测
前端·javascript·图像处理·chrome·ios·iphone·heic
libokaifa27 分钟前
把语音模型塞进手机:sherpa-onnx 在 Android 上的 ASR / TTS
前端
deli0071 小时前
DLA 枝晶生长实测:5000 个粒子集体停摆之后,分形维数收敛到 1.70
前端
IT_陈寒1 小时前
Redis卡顿的锅,这次真不是大key的错
前端·人工智能·后端
可乐鸡翅yeah_1 小时前
video.js 集成 hls.js 开发 M3U8 播放器,新手高频踩坑
开发语言·前端·javascript·后端·ecmascript·m3u8·音视频在线播放
程序猿追2 小时前
HarmonyOS 6 上做个极简浏览器:Web 组件 + 前进后退 + 加载进度
前端·华为·harmonyos
沐沐师2 小时前
Mybatis 框架教程
前端
三天不学习2 小时前
Tailwind CSS 快速入门(2026 版):从 v4 零配置上手,到「该不该用、怎么用好」的选型实战
前端·css·tailwind
明月_清风2 小时前
面对陌生的 GitHub 项目无从下手?这 4 个网站帮你快速读懂源码
前端·后端·github