时间戳

首页 > 解决方案 > 使用javascript将文本从div复制到剪贴板

javascript - 使用javascript将文本从div复制到剪贴板

问题描述

我正在尝试将文本从下一个 div 复制到剪贴板Javascript。以下是我当前的代码：

HTML：

<div class="hl7MsgBox">
    <span class="boxspan">1</span>
    <br>
    <span class="boxspan">2</span>
    <br>
    <span class="boxspan">3</span>
    <br>
    <span class="boxspan">4</span>
    <br>
    <span class="boxspan">5</span>
    <br>
    <span class="boxspan">6</span>
    <br>
    <span class="boxspan">7</span>
    <br>
    <span class="boxspan">8</span>
</div>

Javascript：

$(".btnFileCopy").click(function () {
    var copyText = document.getElementsByClassName("hl7MsgBox");
    copyText.select();
    document.execCommand("copy");
});

当我将它粘贴到notepad：

1
2
3
4
5
6
7
8

但是，由于某种原因，它不起作用并抛出下一条错误消息：

未捕获的 TypeError：copyText.select 不是函数...

有谁知道我该如何解决这个问题？

标签： javascriptclipboard

解决方案

首先，一些参考：

getElementsByClassName()Document 接口的方法返回具有所有给定类名的所有子元素的类数组对象。在文档对象上调用时，将搜索完整的文档，包括根节点。您也可以调用getElementsByClassName()任何元素；它将仅返回具有给定类名的指定根元素的后代元素。

因此，在您的特定情况下，该copyText变量将包含一个元素数组（那些hl7MsgBox在文档元素下具有类的元素）。现在，因为在您的情况下，该类只有一个元素，您可以使用 访问它copyText[0]并使用copyText[0].textContent. 总之，您可以执行类似 next 的操作来获取要复制的文本：

var elems = document.getElementsByClassName("hl7MsgBox");
var copyText = elems[0].textContent;

另一种可能性是使用方法querySelector()：

Document 方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个元素。如果没有找到匹配项，null则返回。

使用该querySelector()方法，您可以简单地执行以下操作：

var copyText = document.querySelector(".hl7MsgBox").textContent;

最后，我们可以创建一个名为的通用方法copyToClipBoard()，其唯一工作是将接收string到的数据复制到剪贴板，然后用 pure 重新排列代码，Javascript如下所示：

const copyToClipBoard = (str) =>
{
    const el = document.createElement('textarea');
    el.value = str;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
};

document.querySelector(".btnCopy").addEventListener("click", function()
{
    var copyText = document.querySelector(".hl7MsgBox").textContent;

    // Or...
    //var elems = document.getElementsByClassName("hl7MsgBox");
    //var copyText = elems[0].textContent;

    copyToClipBoard(copyText);
});
<div class="hl7MsgBox">
    <span class="boxspan">1</span>
    <br>
    <span class="boxspan">2</span>
    <br>
    <span class="boxspan">3</span>
    <br>
    <span class="boxspan">4</span>
    <br>
    <span class="boxspan">5</span>
    <br>
    <span class="boxspan">6</span>
    <br>
    <span class="boxspan">7</span>
    <br>
    <span class="boxspan">8</span>
</div>
<button class="btnCopy">Copy To Clipboard</button>
<br>
<textarea rows=8 cols=50 placeholder="Paste text here..."></textarea>

推荐阅读