前端实现点击复制功能---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)

相关推荐
早點睡39010 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-localize
javascript·react native·react.js
踩着两条虫10 小时前
AI驱动的Vue3应用开发平台 深入探究(十六):扩展与定制之自定义组件与设计器面板
前端·vue.js·人工智能·开源·ai编程
棋鬼王10 小时前
Cesium(十) 动态修改白模颜色、白模渐变色、白模光圈特效、白模动态扫描光效、白模着色器
前端·javascript·vue.js·智慧城市·数字孪生·cesium
酉鬼女又兒10 小时前
零基础快速入门前端蓝桥杯Web备考:BOM与定时器核心知识点详解(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯
望眼欲穿的程序猿10 小时前
MacOS自定义安装Rust
开发语言·macos·rust
ThridTianFuStreet小貂蝉10 小时前
面试题1:请系统讲讲 Vue2 与 Vue3 的核心差异(响应式、API 设计、性能与编译器)。
前端·javascript·vue.js
wjs202410 小时前
CSS 动画:深入浅出的探索与实践
开发语言
俊劫10 小时前
AI Harness - 2026 AI 工程新范式
前端·openai·ai编程
wjs202410 小时前
二分搜索树
开发语言
沐知全栈开发10 小时前
Memcached delete 命令详解
开发语言