时间戳

首页 > 解决方案 > 对于具有相同类的无限元素，如何将无限数量的副本复制到剪贴板？

javascript - 对于具有相同类的无限元素，如何将无限数量的副本复制到剪贴板？

问题描述

我的 HTML：

   <Div Class='POSTS'>
    <Div Class='POST'>
        <Div Class='CONTENT'>Text1</Div>
    </Div>
    <Div Class='POST'>
        <Div Class='CONTENT'>Text2</Div>
    </Div>
    <Div Class='POST'>
        <Div Class='CONTENT'>Text3</Div>
    </Div>
    <Div Class='POST'>
        <Div Class='CONTENT'>Text4</Div>
    </Div>
    <Div Class='POST'>
        <Div Class='CONTENT'>Text5</Div>
    </Div>
    <Div Class='POST'>
        <Div Class='CONTENT'>Text6</Div>
    </Div>
</Div>

它继续没有任何限制......（永无止境）每个元素内部都有不同的文本，具有“CONTENT”类。

我搜索了这个网站，发现了这个：

https://Stackoverflow.Com/Questions/400212/How-Do-I-Copy-To-The-Clipboard-In-Javascript

但在我正在工作的项目中，我无法在每个元素上指定 Id，因为你知道它是无限数量的这些元素：

<Div Class='POST'>
        <Div Class='CONTENT'>some text</Div>
    </Div>

所以需要自动添加。

我想要：当用户点击“内容”类的元素内部的文本时（不管文本有多长和它有什么），整个文本和标签和......被复制到 Clipbored。

我不想设置按钮！我想做整体

标签、文本和.... 无限制地复制到每个标签上！通过点击它自己的文本。（想象这是一个文本区域，用户点击其中的文本，js复制所有文本，但这个是div，里面有文本）

如果您认为我错过了某事并且还不够清楚，请告诉我！

提前致谢！

标签： javascripthtmljquerycopyclipboard

解决方案

这应该可以解决您的问题。首先选择整个对象，然后获取被点击的元素。复制内容。

var posts = document.querySelector(".POSTS"); 

posts
  .addEventListener("click", function (e) {
    console.log("index", e.target);
    navigator.clipboard.writeText(e.target.innerText).then(
      function () {
        console.log("Async: Copying to clipboard was successful!");
      },
      function (err) {
        console.error("Async: Could not copy text: ", err);
      }
    );
  });

推荐阅读