js实现复制功能

一、具体场景
前端有时需要实现点击按钮复制的功能,这个时候就不能让用户去手动选择内容右键复制了。

二、实现方式
1. document.execCommand
(1)具体实现
复制时,先选中文本,然后调用document.execCommand(‘copy’),选中的文本就会进入剪贴板。这就需要借助输入框来实现对文本的选中。
具体案例:

  <button type="button" onclick="theCopy()">复制</button><label style="display: block"><textarea id="textArea">哈哈哈哈哈哈哈哈哈111111</textarea></label>
  function theCopy() {let textArea = document.getElementById('textArea')console.log(textArea);textArea.select()document.execCommand('copy')}

html加js这些就可以实现,但是我又发现另一种写法!!

如果内容不在输入框中,我们可以借助一个透明的输入框来实现 
 

  <button type="button" onclick="theCopy()">复制</button><p id="text">哈哈哈哈哈哈哈哈哈111111</p><label style="display: block"><textarea id="textArea" style="opacity: 0;"></textarea></label>
  function theCopy() {let textArea = document.getElementById('textArea')let text = document.getElementById('text')textArea.innerText = text.innerHTMLconsole.log(textArea);textArea.select()document.execCommand('copy')}

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/696161.shtml

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

相关文章

171基于matlab的随机共振微弱信号检测

基于matlab的随机共振微弱信号检测&#xff0c;随机共振描述了过阻尼布朗粒子受周期性信号和随机噪声的共同作用下,在非线性双稳态系统中所发生的跃迁现象. 随机共振可用于弱信号的检测。程序已调通&#xff0c;可直接运行。

共享之力:分布式计算的奇迹

在信息时代的浪潮中&#xff0c;分布式计算作为一种革命性的技术&#xff0c;已经深刻地改变了我们对计算和数据处理的理解方式。其发展历程既是一段精彩的科技史&#xff0c;也是一段充满探索与突破的冒险故事&#xff0c;从最初的概念探索到如今的普及应用&#xff0c;分布式…

HashMap 源码学习-jdk1.8

1、一些常量的定义 这里针对MIN_TREEIFY_CAPACITY 这个值进行解释一下。 java8里面&#xff0c;HashMap 的数据结构是数组 &#xff08;链表或者红黑树&#xff09;&#xff0c;每个数组节点下可能会存在链表和红黑树之间的转换&#xff0c;当同一个索引下面的节点超过8个时…

【Webpack】处理字体图标和音视频资源

处理字体图标资源 1. 下载字体图标文件 打开阿里巴巴矢量图标库open in new window选择想要的图标添加到购物车&#xff0c;统一下载到本地 2. 添加字体图标资源 src/fonts/iconfont.ttf src/fonts/iconfont.woff src/fonts/iconfont.woff2 src/css/iconfont.css 注意字体…

[计算机网络]---TCP协议

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一 、TCP协…

Java并发基础:原子类之AtomicBoolean全面解析

本文概要 AtomicBoolean类优点在于能够确保布尔值在多线程环境下的原子性操作&#xff0c;避免了繁琐的同步措施&#xff0c;它提供了高效的非阻塞算法实现&#xff0c;可以大大提成程序的并发性能&#xff0c;AtomicBoolean的API设计非常简单易用。 AtomicBoolean核心概念 …

P1024 [NOIP2001 提高组] 一元三次方程求解

P1024 [NOIP2001 提高组] 一元三次方程求解 纯代码记录 #include <iostream> #include <math.h> using namespace std; double a,b,c,d; double res[3];//用于存放三个解 int resCount;inline double F(double x)//三次函数 {return a*pow(x,3)b*pow(x,2)c*xd; }//…

web前端开发this指向问题

❗ 函数内部中的 this 指向谁&#xff0c;不是在函数定义时决定的&#xff0c;而是在函数第一次调用并执行的时候决定的 1. call 方法 语法&#xff1a;函数名.call(调用者, 参数1, …) 作用&#xff1a;函数被借用时&#xff0c;会立即执行&#xff0c;并且函数体内的this会…

Facebook Horizon:探索虚拟现实中的社交空间

随着科技的不断进步&#xff0c;虚拟现实&#xff08;VR&#xff09;技术正成为社交互动和娱乐体验的新前沿。在这个数字时代&#xff0c;Facebook作为全球最大的社交媒体平台之一&#xff0c;正在引领虚拟社交的新时代&#xff0c;其推出的虚拟社交平台Facebook Horizon成为了…

Tomcat线程池原理(下篇:工作原理)

文章目录 前言正文一、执行线程的基本流程1.1 JUC中的线程池执行线程1.2 Tomcat 中线程池执行线程 二、被改造的阻塞队列2.1 TaskQueue的 offer(...)2.2 TaskQueue的 force(...) 三、总结 前言 Tomcat 线程池&#xff0c;是依据 JUC 中的线程池 ThreadPoolExecutor 重新自定义…

深入理解C语言(5):程序环境和预处理详解

文章主题&#xff1a;程序环境和预处理详解&#x1f30f;所属专栏&#xff1a;深入理解C语言&#x1f4d4;作者简介&#xff1a;更新有关深入理解C语言知识的博主一枚&#xff0c;记录分享自己对C语言的深入解读。&#x1f606;个人主页&#xff1a;[₽]的个人主页&#x1f3c4…

Imagewheel私人图床搭建结合内网穿透实现无公网IP远程访问教程

文章目录 1.前言2. Imagewheel网站搭建2.1. Imagewheel下载和安装2.2. Imagewheel网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar临时数据隧道3.2.Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测…

flutter 文件上传组件和大文件分片上传

文件分片上传 资料 https://www.cnblogs.com/caijinglong/p/11558389.html 使用分段上传来上传和复制对象 - Amazon Simple Storage Service 因为公司使用的是亚马逊的s3桶 下面是查阅资料获得的 亚马逊s3桶的文件上传分片 分段上分为三个步骤&#xff1a;开始上传、上传对…

CSP-J 2023 T3 一元二次方程

文章目录 题目题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 题目传送门题解思路总代码 提交结果尾声 题目 题目背景 众所周知&#xff0c;对一元二次方程 a x 2 b x c 0 , ( a ≠ 0 ) ax ^ 2 bx c 0, (a \neq 0) ax2bxc0,(a0)&#xff0c;可…

STM32G030C8T6:定时器1ms中断(以64MHz外部晶振为例)

本专栏记录STM32开发各个功能的详细过程&#xff0c;方便自己后续查看&#xff0c;当然也供正在入门STM32单片机的兄弟们参考&#xff1b; 本小节的目标是&#xff0c;系统主频64 MHZ,采用高速外部晶振&#xff0c;通过定时器3 每秒中断控制 PB9 引脚输出高低电平&#xff0c;从…

20240222作业

完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示“登录成功"&#xff0c;提供一个Ok按钮&#xff0c;用户点击OK后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&…

Java基础-注解

注解 注解是用来干什么的它有什么作用注解的常见分类内置注解Override注解定义 Deprecated注解定义 SuppressWarnings注解定义 元注解Target注解定义ElementType Retention&&RetentionTarget注解定义RetentionPolicy Documented注解定义 Inherited注解定义用法 Repeata…

低代码开发:推动互联网企业数字化转型的关键因素

联网行业作为我国数字经济发展的核心驱动力&#xff0c;在推动国家数字化转型中扮演着至关重要的角色。与其他传统行业相比&#xff0c;互联网企业面临更加紧迫的数字化转型需求&#xff0c;因为它们需要不断适应快速变化的市场环境和技术趋势。 然而&#xff0c;由于互联网企业…

深入理解APDU协议与Java开发

1. 什么是APDU&#xff1f; APDU&#xff0c;即应用协议数据单元&#xff08;Application Protocol Data Unit&#xff09;&#xff0c;是一种在智能卡与卡片读卡器之间进行通信的协议。APDU定义了在交互中传输的数据格式和规则&#xff0c;允许读卡器发送指令并接收响应。 2…

MFC 皮肤库配置

1.创建MFC 对话框 2.添加皮肤资源 添加资源 添加头文件 关闭SDL检测 添加静态库文件 修改字符集 添加头文件 将皮肤中的ssk文件加载到初始化实例中 > 运行即可