JS片段:如何将文本复制到剪贴板

在构建网站时,一个非常普遍的需求是能够通过单击按钮将文本复制到剪贴板。在现代浏览器中,使用navigator.clipboardAPI 访问系统剪切板,利用clipboard.writeText复制到剪贴板,再通过clipboard.readText获取剪贴板内容即可实现。

实现效果

复制到剪贴板

源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .copy {
            width: 300px;
            height: 100px;
            border: 1px solid saddlebrown;
        }
    </style>
  </head>
  <body>
    <p>这是待复制的内容:如何将文本复制到剪贴板</p>
    <button id="once">一键复制</button>
    <button id="content">展示剪贴板内容</button>
    <p class="copy"></p>
    <script>
      const copyToClipboard = (str) => {
        if (navigator?.clipboard?.writeText) {
          return navigator?.clipboard?.writeText(str);
        }
        return Promise.reject();
      };
      const getCopyClipboard = () => {
        return navigator.clipboard.readText();
      };
      const btn = document.querySelector("#content");
      const p = document.querySelector(".copy");
      const once = document.querySelector('#once');
      once.addEventListener('click', (str) => {
        const p = document.querySelector('p');
        copyToClipboard(p.innerText).then(() => {
            alert('复制成功');
        })
      });
      btn.addEventListener("click", async () => {
        const copyContent = await getCopyClipboard();
        p.innerHTML = copyContent;
      });
    </script>
  </body>
</html>

参考资料

  • Navigator:clipboard 属性

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

APH-Archives of Public Health

文章目录 一、期刊简介二、征稿信息三、期刊表现四、投稿须知五、投稿咨询 一、期刊简介 Archives of Public Health是一份范围广泛的公共卫生杂志&#xff0c;致力于出版公共卫生领域所有可靠的科学。该杂志旨在更好地了解人群的健康。该杂志有助于公共卫生知识&#xff0c;加…

Debug-010-git stash的用法及使用场景

问题原因&#xff1a; 其实也不是最近&#xff0c;就是之前就碰到过这个问题&#xff0c;那就是我正在新分支开发新功能&#xff0c;开发程度还没有到可以commit的程度&#xff0c;我不想提交(因为有些功能没有完全实现&#xff0c;而且没有自测的话很容易有问题&#xff0c;提…

智能车竞赛指南:从零到一,驶向自动驾驶的未来

智能车竞赛指南&#xff1a;从零到一&#xff0c;驶向自动驾驶的未来 一、智能车竞赛概览1.1 竞赛介绍1.2 竞赛分类 二、智能车开发技术基础2.1 硬件平台2.2 软件开发 三、实战案例&#xff1a;循线小车开发3.1 系统架构3.2 代码示例 四、技术项目&#xff1a;基于ROS的视觉导航…

4月粽子行业线上市场销售数据分析

随着节日庆祝常态化&#xff0c;消费者对礼物消费的态度发生变化&#xff0c;这会影响粽子的消费模式和市场需求。再加上技术进步&#xff0c;如速冻粽子和真空粽子的推广&#xff0c;也极大地推动了粽子行业的发展&#xff0c;使得产品更易于保存和运输&#xff0c;从而满足了…

linux系统内存持续飙高的排查方法

目录 前言&#xff1a; 1、查看系统内存的占用情况 2、找出占用内存高的进程 3、解决方法 4、补充&#xff1a;如果物理内存使用完了&#xff0c;会发生的情况 前言&#xff1a; 如果一台服务器内存使用率持续处于一个高峰值&#xff0c;服务器可能会出现响应慢问题。例如s…

linux系统硬盘读写慢的排查方法

如果服务器硬盘读写慢&#xff0c;可能会导致处理性能降低&#xff0c;用户响应慢。因此及时排除故障至关重要。下面是硬盘读写慢的排查思路。 1、top命令查看硬盘是否繁忙。 2、找出占用硬盘带宽高的进程。 通过iotop命令进行查看&#xff0c;iotop命令是用于展示硬盘读写操作…

Docker入门指南:Docker的常用命令总结(五)

&#x1f340; 前言 博客地址&#xff1a; CSDN&#xff1a;https://blog.csdn.net/powerbiubiu &#x1f44b; 简介 前面对Docker的安装&#xff0c;镜像&#xff0c;容器&#xff0c;数据卷进行了介绍&#xff0c;本章节总结下Docker的常用命令。 &#x1f4d6; 正文 1 基…

一文读懂Linux

前言 为了便于理解&#xff0c;本文从常用操作和概念开始讲起。虽然已经尽量做到简化&#xff0c;但是涉及到的内容还是有点多。在面试中&#xff0c;Linux 知识点相对于网络和操作系统等知识点而言不是那么重要&#xff0c;只需要重点掌握一些原理和命令即可。为了方便大家准…

家政预约小程序05服务管理

目录 1 设计数据源2 后台管理3 后端API4 调用API总结 家政预约小程序的核心是展示家政公司提供的各项服务的能力&#xff0c;比如房屋维护修缮&#xff0c;家电维修&#xff0c;育婴&#xff0c;日常保洁等。用户在选择家政服务的时候&#xff0c;价格&#xff0c;评价是影响用…

【零代码智能体开发】打造一个“情感和好大师”,解决人际关系中的困扰

〇、前言 智能体技术的快速发展带动了用户需求和实际应用场景仍需进一步探索。为激发开发者的创意潜能&#xff0c;探索具有应用价值的智能体&#xff0c;“文心智能体大赛”应运而生。 文心智能体平台 是百度推出的基于文心大模型的智能体&#xff08;Agent&#xff09;平台…

操作系统实验1:Linux常用命令及简单C语言程序调试

1.1实验目的 了解Linux系统的组织和行为&#xff0c;包括 Linux的用户界面、目录结构组织、运行程序的基本方式。通过使用终端(terminal)熟悉Linux Shell 、常见命令(cd、ls、ps、chmod等)和 redirect、pipe机制。学习使用vi或者gedit等编辑器编辑一个c语言源程序&#xff0c;…

二叉树求解大小操作详解

目录 一、求所有结点个数 1.1 递归思路 1.2 递归分支图 1.3 递归栈帧图 1.4 C语言实现 二、求叶子结点个数 2.1 递归思路 2.2 递归分支图 2.3 递归栈帧图 2.4 C语言实现 三、求第K层的结点个数 3.1 递归思路 3.2 递归分支图 3.3 递归栈帧图 3.4 C语言实现 四、求…

C++的红黑树

目录 基本概念 插入结点的颜色 判断性质是否破坏 调整方式 u为g的右孩子 u存在且为红 u存在且为黑 u不存在 结论 红黑树结点定义 代码实现 基本概念 1、红黑树是一种特殊的二叉搜索树&#xff0c;每个结点会增加一个存储位表示结点的颜色&#xff08;红或黑&#x…

超前预热|博睿数据将应邀出席双态IT用户大会,分享《构建云原生时代的一体化智能可观测性》

5月31日&#xff0c;第十二届双态IT用户大会将于成都盛大开幕&#xff0c;此次大会由DCMG和双态IT论坛联合主办&#xff0c;聚焦“信创时代的组织级云原生能力建设”和“组织级云原生运维能力建设”两大会议主题&#xff0c;旨在推动双态IT落地与创新&#xff0c;为企业数字化转…

syncthing文件夹同步与版本管理

1 前言 syncthing可以用来同步文件夹里的所有文件&#xff0c;并且有不错的版本管理&#xff0c;基本每次更改文件&#xff0c;20-40秒就被扫描到了&#xff0c;非常丝滑&#xff1b;这次以此来同步obsidian的插件和文件&#xff0c;达到多端同步&#xff1b; 我家里有一台台…

【C语言回顾】联合和枚举

前言1. 联合体1.1 联合体的声明1.2 联合体的特点1.3 联合体的使用 2. 枚举2.1 枚举的声明2.2 枚举的特点2.3 枚举的使用 结语 #include<GUIQU.h> int main { 上期回顾: 【C语言回顾】结构体 个人主页&#xff1a;C_GUIQU 专栏&#xff1a;【C语言学习】 return 一键三连;…

x264 码率控制 MBtree 原理:mbtree_propagate_list 函数分析

mbtree_propagate_list 函数功能 是视频编码中宏块树传播算法的一部分,用于在编码决策过程中更新参考帧的传播成本。这个过程特别关注于如何处理运动向量(Motion Vectors, MVs)以及如何根据这些MVs对参考帧的成本进行加权,从而影响最终的编码选择。 该函数作为x264编码器…

【Android】联系人列表补充

真布局--叠起来垂直管 效果展示 部分代码&#xff08;在activity_main&#xff09;里面 <FrameLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"…

二十五、openlayers官网示例CustomOverviewMap解析——实现鹰眼地图、预览窗口、小窗窗口地图、旋转控件

官网demo地址&#xff1a; Custom Overview Map 这个示例展示了如何在地图上增加一个小窗窗口的地图并跟随着地图的旋转而旋转视角。 首先加载了一个地图。其中 DragRotateAndZoom是一个交互事件&#xff0c;它可以实现按住shift键鼠标拖拽旋转地图。 const map new Map({int…

Java分支结构详解

Java分支结构详解 前言一、if 语句基本语法表示一表示二表示三 代码示例判定一个数字是奇数还是偶数判定一个数字是正数还是负数判定某一年份是否是闰年 注意要点悬垂 else 问题代码风格问题分号问题 二、switch 语句基本语法代码示例根据 day 的值输出星期 注意事项break 不要…