当前位置: 首页 > news >正文

复制粘贴是怎么实现的

在上面的代码中,command 和 select 是自定义的函数。它们的作用如下:

实现复制粘贴的思路:

  1. 创建一个 textarea 标签
  2. 将 textarea 移出可视区域
  3. 给这个 textarea 赋值
  4. 将这个 textarea 标签添加到页面中
  5. 调用 textarea 的 select 方法
  6. 调用 document.execCommand(‘copy’)
  7. 删除 textarea 标签

实现代码如下:

function copyToClipboard() {const copyInfo = '复制信息'const tArea = document.createElement('textarea');// 上篇笔记提到的?? 操作符tArea.value = copyInfo ?? '';// 让元素不在可视区域tArea.style.position = 'absolute';tArea.style.left = '-9999px'document.body.appendChild(tArea);tArea.select();try {document.execCommand('copy')alert('复制成功')} catch (error) {console.log('error', error)}tArea.remove();
}
copyToClipboard()

因为浏览器的差异,上面的代码并没能在浏览器中成功的实现复制操作。但是将tArea.remove()方法注掉,在控制台手动调用document.execCommand(‘copy’) 是可以成功复制的。

在这里插入图片描述

http://www.lryc.cn/news/157255.html

相关文章:

  • mybatisplus多租户原理略解
  • Spring整合RabbitMQ-配制文件方式-1-消息生产者
  • Python Opencv实践 - 凸包检测(ConvexHull)
  • IP网络广播系统有哪些优点
  • 【LeetCode】83. 删除排序链表中的重复元素
  • 【大数据】Flink 详解(七):源码篇 Ⅱ
  • stable diffusion实践操作-SD原理
  • C++ Primer Plus第十三章编程练习答案
  • Elasticsearch:wildcard - 通配符搜索
  • 配置类安全问题学习小结
  • IMX6ULL移植篇-uboot源码目录
  • SAP MM学习笔记27- 购买依赖(采购申请)
  • C++零碎记录(八)
  • 基于matlab的扩频解扩误码率完整程序分享
  • 算法:轮转数组---循环取模运算
  • Vue教程
  • 算法之双指针题型:
  • vue传递给后端时间格式问题
  • php使用jwt作登录验证
  • 【zlm】 PTS DTS
  • 【两周学会FPGA】从0到1学习紫光同创FPGA开发|盘古PGL22G开发板学习之DDR3 IP简单读写测试(六)
  • 第6章 内核模块符号导出实验(iTOP-RK3568开发板驱动开发指南 )
  • Android12.0首次开机默认授予app运行时权限(去掉运行时授权弹窗)第二种方法
  • conda和Python的虚拟环境如何结合使用,以及二者之间到底有什么区别?
  • 宇凡微YE09合封芯片,集成高性能32位mcu和2.4G芯片
  • 使用perf_analyzer和model-analyzer测试tritonserver的模型性能超详细完整版
  • docker 部署springboot(成功、截图)
  • VMware ubuntu空间越用越大
  • stm32 学习笔记:GPIO输出
  • css换行