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

相关推荐
luanma15098019 分钟前
PHP vs C++:编程语言终极对决
开发语言·c++·php
寂静or沉默21 分钟前
2026最新Java岗位从P5-P7的成长面试进阶资源分享!
java·开发语言·面试
英俊潇洒美少年29 分钟前
vue如何实现react useDeferredvalue和useTransition的效果
前端·vue.js·react.js
kyriewen111 小时前
给浏览器画个圈:CSS contain 如何让页面从“卡成PPT”变“丝滑如德芙”
开发语言·前端·javascript·css·chrome·typescript·ecmascript
英俊潇洒美少年1 小时前
react19和vue3的优缺点 对比
前端·javascript·vue.js·react.js
娇娇yyyyyy2 小时前
QT编程(18): Qt QItemSelectionModel介绍
开发语言·qt
豆豆的java之旅2 小时前
软考中级软件设计师 数据结构详细知识点(含真题+练习题,可直接复习)
java·开发语言·数据结构
sthnyph2 小时前
QT开发:事件循环与处理机制的概念和流程概括性总结
开发语言·qt
大尚来也2 小时前
Java 反射:从“动态魔法”到生产实战的避坑指南
开发语言
无心水2 小时前
Java时间处理封神篇:java.time全解析
java·开发语言·python·架构·localdate·java.time·java时间处理