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

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("已复制到粘贴板!");
相关推荐
沐泽__23 分钟前
iframe内嵌页面双向通信
前端·javascript·chrome
小北方城市网23 分钟前
第4 课:Vue 3 路由与状态管理实战 —— 从单页面到多页面应用
前端·javascript·vue.js
ohyeah34 分钟前
用 Vue3 + Coze API 打造冰球运动员 AI 生成器:从图片上传到风格化输出
前端·vue.js·coze
interception40 分钟前
爬虫逆向,瑞数6,补环境,国家专利
javascript·爬虫·python·网络爬虫
Dragon Wu44 分钟前
TailWindCss 核心功能总结
前端·css·前端框架·postcss
SHolmes18541 小时前
给定某日的上班时间段,计算当日的工作时间总时长(Python)
开发语言·前端·python
掘金安东尼1 小时前
顶层元素问题:popover vs. dialog
前端·javascript·面试
掘金安东尼1 小时前
React 的新时代已经到来:你需要知道的一切
前端·javascript·面试
掘金安东尼1 小时前
React 已经改变了,你的 Hooks 也应该改变
前端·vue.js·github
Codebee1 小时前
A2UI vs OOD全栈方案:AI驱动UI的两种技术路径深度解析
前端·架构