前端js 复制文本到剪切板

在JavaScript中,你可以使用navigator.clipboard.writeText()方法将文字复制到剪切板。这个方法返回一个Promise,当复制操作完成时会resolve。

function copyTextToClipboard(text) {// 检查浏览器是否支持 Clipboard APIif (navigator.clipboard && window.isSecureContext) {// 使用 Clipboard API 复制文本navigator.clipboard.writeText(text).then(() => {console.log('文本已成功复制到剪贴板');}).catch(err => {console.error('无法复制文本: ', err);});} else {// 如果不支持 Clipboard API 或不是安全上下文(HTTPS),则回退到旧的方法fallbackCopyTextToClipboard(text);}
}function fallbackCopyTextToClipboard(text) {// 创建一个“隐藏”的 inputconst textArea = document.createElement("textarea");textArea.value = text;// 将“隐藏”的 input 添加到文档中document.body.appendChild(textArea);// 选择并复制文本textArea.select();try {const successful = document.execCommand('copy');const msg = successful ? '成功' : '失败';console.log(`Fallback: 复制文本 ${msg}`);} catch (err) {console.error('Fallback: Oops, 无法执行命令', err);}// 移除“隐藏”的 inputdocument.body.removeChild(textArea);
}// 调用函数并传入想要复制的文本
copyTextToClipboard('你想要复制的文字内容');

请注意,navigator.clipboard.writeText() 方法需要在用户交互事件(如点击)的上下文中调用,而且通常只在 HTTPS 环境下可用,因为这是一个安全特性。如果你在非安全上下文中尝试使用它,可能会遇到问题或被浏览器阻止。

此外,document.execCommand('copy') 是一种较老的方式,用于在不支持现代 Clipboard API 的环境中提供向后兼容性。然而,execCommand 已经被标记为过时,应该尽可能使用 Clipboard API 替代。


该方法是AI查询的,经实际应用后好使

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

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

相关文章

构建高性能网络服务:从 Socket 原理到 Netty 应用实践

1. 引言 在 Java 网络编程中,Socket 是实现网络通信的基础(可以查看我的上一篇博客)。它封装了 TCP/IP 协议栈,提供了底层通信的核心能力。而 Netty 是在 Socket 和 NIO 的基础上,进一步封装的高性能、异步事件驱动的…

Docker PG流复制搭建实操

目录标题 制作镜像1. 删除旧的容器2. 创建并配置容器3. 初始化数据库并启动 主库配置参数4. 配置主库5. 修改 postgresql.conf 配置 备库配置参数6. 创建并配置备库容器7. 初始化备库 流复制8. 检查主库复制状态9. 检查备库配置 优化建议问题1:FATAL: using recover…

Elasticsearch 批量导入数据(_bluk方法)

官方API&#xff1a;https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-bulk.html 建议先看API POST /<索引名>/_bulk 格式要求&#xff1a; POST _bulk { "index" : { "_index" : "test", "_id" : &q…

思维转换:突破思维桎梏,创造更高效的工作与生活

在现代职场和生活中&#xff0c;我们经常面临着各种挑战和问题&#xff0c;有时候虽然付出了很多努力&#xff0c;但依然难以找到更有效的解决方案。这时&#xff0c;或许我们需要的不是更多的努力&#xff0c;而是一次“思维转换”。这一概念看似简单&#xff0c;但它背后却蕴…

后端代码方式导出excle模板

目录 1.接口层2.业务层3.前端请求4.或者直接用tomcat方式导出 1.接口层 PostMapping("/exprotExcelTemplate")public void exprotExcelTemplate(HttpServletResponse response) throws Exception {exportExcelService.exprotExcelTemplate(response);}2.业务层 Overr…

Active Prompting with Chain-of-Thought for Large Language Models

题目 大型语言模型的思维链主动提示 论文地址&#xff1a;https://arxiv.org/abs/2302.12246 项目地址&#xff1a;https://github.com/shizhediao/active-prompt 摘要 大型语言模型(LLM)规模的不断扩大为各种需要推理的复杂任务带来了涌现能力&#xff0c;例如算术和常识推理…

Windows图形界面(GUI)-QT-C/C++ - QT控件创建管理初始化

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​链接点击跳转博客主页 目录 控件创建 包含对应控件类型头文件 实例化控件类对象 控件设置 设置父控件 设置窗口标题 设置控件大小 设置控件坐标 设置文本颜色和背景颜色 控件排版 垂直布局 QVBoxLayout …

04、Redis深入数据结构

一、简单动态字符串SDS 无论是Redis中的key还是value&#xff0c;其基础数据类型都是字符串。如&#xff0c;Hash型value的field与value的类型&#xff0c;List型&#xff0c;Set型&#xff0c;ZSet型value的元素的类型等都是字符串。redis没有使用传统C中的字符串而是自定义了…

Require:利用MySQL binlog实现闪回操作

1&#xff0c;闪回原理 【binlog】MySQL binlog以event的形式&#xff0c;记录了MySQL server从启用binlog以来所有的变更信息&#xff0c;能够帮助重现这之间的所有变化。MySQL引入binlog主要有两个目的&#xff1a;一是为了主从复制&#xff1b;二是某些备份还原操作后需要重…

traceroute原理探究

文章中有截图&#xff0c;看不清的话&#xff0c;可以把浏览器显示比例放大到200%后观看。 linux下traceroute的原理 本文通过抓包观察一下linux下traceroute的原理 环境&#xff1a;一台嵌入式linux设备&#xff0c;内网ip是192.168.186.195&#xff0c;其上有192.168.202.…

DM表结构修改

DM 表结构修改 注&#xff1a;达梦数据库在操作数据库的时候需要带上模式名、即 模式名表名 模式名 – 也就是数据库名 索引 一个 [模式] 下&#xff0c;[索引名称] 唯一 创建索引 示例&#xff1a; # 语法 CREATE INDEX "[索引名称]" ON "[模式名]".&q…

无源器件-电容

电容器件的参数 基本概念由中学大学物理或电路分析内容获得&#xff0c;此处不做过多分析。 电容的产量占全球电子元器件产品的40%以上。 单位&#xff1a;法拉 F&#xff1b;1F10^6uF&#xff1b;电路中常见的104电容就是10*10^4pF100nF0.1uF C为电容&#xff0c;Rp为绝缘电…

【大模型】大语言模型的数据准备:构建高质量训练数据的关键指南

大语言模型的数据准备&#xff1a;构建高质量训练数据的关键指南 大语言模型&#xff08;LLM, Large Language Model&#xff09;的训练离不开高质量的数据&#xff0c;而数据准备是模型性能的基石。无论是预训练还是微调&#xff0c;数据的选择、清洗和标注都会直接影响模型的…

自动连接校园网wifi脚本实践(自动网页认证)

目录 起因执行步骤分析校园网登录逻辑如何判断当前是否处于未登录状态&#xff1f; 书写代码打包设置开机自动启动 起因 我们一般通过远程控制的方式访问实验室电脑&#xff0c;但是最近实验室老是断电&#xff0c;但重启后也不会自动连接校园网账户认证&#xff0c;远程工具&…

ucharts写的小程序如何解决Y轴小数点问题

去除小数点 在yAxis的data中添加 formatter: (value) > { // console.log("formatter", value, typeof (value)) return value > 0 ? Math.floor(value) : value; } yAxis: {gridType: "dash",dashLength: 2,data: [{unit: &qu…

知识图谱抽取分析中,如何做好实体对齐?

在知识图谱抽取分析中&#xff0c;实体对齐是将不同知识图谱中的相同实体映射到同一表示空间的关键步骤。为了做好实体对齐&#xff0c;可以参考以下方法和策略&#xff1a; 基于表示学习的方法&#xff1a; 使用知识图谱嵌入技术&#xff0c;如TransE、GCN等&#xff0c;将实体…

【redis】centos7下安装redis7

在CentOS 7下安装Redis7可以通过以下两种方法实现&#xff1a;手动编译安装和使用YUM进行安装。 CentOS 7系统的环境和版本&#xff1a; $ cat /etc/centos-release CentOS Linux release 7.9.2009 (Core)手动编译安装 参考官方文档&#xff1a;https://redis.io/docs/lates…

ASP.NET Core 系列总结

ASP.NET Core 系列总结 章节目录1. 入口文件2. 请求管道和中间件3. 依赖注入4. 配置系统5. 选项系统6. 缓存7. 日志记录系统 《ASP.NET Core》 系列文章基于 .NET 3.1 和 .NET 6&#xff0c;主要是系统总结自己日常工作和学习中的知识点&#xff0c;之前是自己在 OneNote 上自己…

FFmpeg硬件解码

使用FFmpeg进行硬件解码时&#xff0c;通常需要结合FFmpeg的API和硬件加速API&#xff08;如CUDA、VAAPI、DXVA2等&#xff09;。以下是一个简单的C代码示例&#xff0c;展示如何使用FFmpeg进行硬件解码。这个示例使用了CUDA作为硬件加速的后端。 1. 安装FFmpeg和CUDA 确保你…

OpenGL 进阶系列18 - OpenGL SuperBible - alienrain 例子学习

一:概述 本文学习记录下 alienrain 的实现原理。它模拟了“Alien”图案的雨滴下落效果,并使用了着色器,纹理数组和Uniform Buffer 缓冲区等现代OpenGL接口。下面是代码实现分析以及主要接口介绍。 二:实现过程 该例子主要使用了GL_TEXTURE_2D_ARRAY 来存储多个图像层,这非…