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

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("已复制到粘贴板!");
相关推荐
IT_陈寒2 小时前
Redis大key删除为什么会导致服务卡顿?我的线上事故复盘
前端·人工智能·后端
系统集成-鹰翔2 小时前
ERP图片改名后仍命中识别缓存:缓存键、十分钟到期与调用计数
javascript·经验分享·后端
用户2705077725243 小时前
MCP 最小 Server 实测:3 个 JSON-RPC 报错与修法
前端
用户499335025073 小时前
一人VIP账号多人共用:Web 代理里的会话共享怎么实现
前端
用户老李3 小时前
无线电自学教程 05:第一台收音机——从矿石机到 SDR
前端
IPIPD3 小时前
Node.js请求遇到503怎么重试?先解析Retry-After,再做有上限退避
前端
葡萄城技术团队3 小时前
dsh-spreadjs-editor 的集成链路:把 SpreadJS Designer 嵌进 Agent 工作台
前端
FlyWIHTSKY4 小时前
vue2和vue3有什么区别,用法上有哪些区别
前端·javascript·vue.js
码云之上4 小时前
10 颗一模一样的「Edit」:中后台 Web Agent 怎么找到对的那一行
前端·人工智能·浏览器
量化分析码农5 小时前
【Python量化多因子实战 04】因子暴露不是 alpha:市值与行业中性化实战
前端·后端