前端实现点击复制功能---execCommand

复制代码
 copy(data) {
    //创建input元素节点
    const input = document.createElement('input')
    //传入需要复制的内容
    input.value = data 
    //插入一个input节点
    document.body.appendChild(input)
    //全选input框里面的内容
    input.select()
    //复制input框中选中的内容,Copy代表复制操作,还有剪切等操作,具体可参考文档链接
    document.execCommand('Copy')
    //移除input节点
    input.remove()
  }

PS:

execCommand会显示弃用,如果要使用,具体兼容性可参考如下链接:

document.execCommand - Web API 接口参考 | MDN (mozilla.org)

相关推荐
Qinana13 分钟前
手搓 AI Agent:从零构建能自动写代码、跑命令的“数字员工”
前端·javascript·agent
何中应14 分钟前
Nginx转发请求错误
前端·后端·nginx
代码小学僧14 分钟前
为什么我推荐前端项目都应该使用 TanStack Query 管理接口请求
前端·react.js·axios
YukiMori2316 分钟前
深入理解 JavaScript 箭头函数的 this:为什么 DOM 事件不推荐用箭头函数?
前端·javascript·dom
不会敲代码119 分钟前
防抖与节流:从输入框看性能优化
前端·javascript·面试
xiyueyezibile21 分钟前
零代码基础?AI 助你免费“搬空”语雀知识库
前端·ai编程
不会敲代码123 分钟前
React 受控组件与非受控组件完全指南
前端·react.js
不会敲代码123 分钟前
React Hooks 进阶:useRef 核心用法与受控/非受控组件实战解析
前端·react.js·面试
恋猫de小郭37 分钟前
Android 官方正式官宣 AI 支持 AppFunctions ,Android 官方 MCP 和系统级 OpenClaw 雏形
android·前端·flutter
Moment1 小时前
一周重写 Next.js?Cloudflare 和 AI 做到了😍😍😍
前端·javascript·后端