复制粘贴是怎么实现的

在上面的代码中,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.hqwc.cn/news/101404.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

曾国藩农民出身,弯道超车实现逆袭的大智慧

曾国藩从小就笨笨的,读书多了才开窍,实现人生逆袭。农民出身,弯道超车,贵在坚持。 约翰生说过:“成大事不在于力量的大小,而在于能坚持多久。” 很多家长认为“不让孩子输在起跑线上”,这是错…

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书杭州师范大学图书馆

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书杭州师范大学图书馆

壁炉在文学和艺术中的代表着什么呢,能给我们带来什么样的影响?

壁炉,不仅仅是家庭温暖的来源,也是文学和艺术中常见的重要元素。它的形象在文学作品、绘画和电影中频繁出现,不仅为故事情节提供了背景,还象征着情感、温馨和安全感。让我们一起深入探讨壁炉在文学和艺术中的形象,以及…

U-net网络学习记录

U-net网络 本质上是一个用于图像分割的神经网络 输入是一幅图,输出是目标的分割结果。继续简化就是,一幅图,编码,或者说降采样,然后解码,也就是升采样,然后输出一个分割结果。根据结果和真实分…

EG1164大功率同步整流升压模块开源,最高效率97%

EG1164大功率同步整流Boost升压电源模块,最高效率97%,输入电压8~50V,输出电压8~60V可调,最大功率300瓦以上,开关频率219kHz。 白嫖了张嘉立创的彩色丝印券就随便画了个板试试,第一次打彩色丝印。 因为我测…

【C++基础】类与对象(上):访问限定符、类作用域、类实例化、类对象模型、this指针

​👻内容专栏: C/C编程 🐨本文概括: C基础语法。访问限定符、类作用域、类实例化、类对象模型、this指针等。 🐼本文作者: 阿四啊 🐸发布时间:2023.9.6 面向过程和面向对象初识 C语…

LeetCode 3. 无重复字符的最长子串

题目链接 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 题目解析 我们需要找的是含重复元素的最长子串,当然直接暴力求解固然简单。但是可能引发的情况是超时,而且面试官想看到的也不是让你去暴力解决这类问题。因此我们使…

jsp 新能源汽车论坛网Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 新能源汽车论坛网是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5.0…

企业电脑文件加密系统 / 防泄密软件——「天锐绿盾」

「天锐绿盾」是一种公司文件加密系统,旨在保护公司内网数据安全,防止信息泄露。该系统由硬件和软件组成,其中包括服务端程序、控制台程序和终端程序。 PC访问地址: isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c…

git branch 分支

分支的定义 一个分支是git一个可移动的指针,指向某次提交。每次提交后,当前分支指针就往前挪一个,挪到最新的提交上。 HEAD 指向当前活动的分支 master 默认分支名 (git init命令 默认创建它) 常见分支指令 创建一个…

【恒生电子内推码】

Hello,我是恒生电子股份有限公司的校园大使,不想简历投递后“泡池子”,登录链接:campus.hundsun.com/campus/jobs,填写我的推荐码:EZVJR0,投递,简历第一时间送到HR面前,快…

Echarts图表跟随父容器的变化自适应

如果页面中有多个图表 隐藏/展开左边侧边栏echarts图表自适应 <div class"line"><div class"title">制冷站关键参数</div><div id"chartLine1" style"width: 100%;height:85%;"></div></div><…