Javascript CopytoClipboard 函数只复制 1 行答案

【问题标题】：Javascript CopytoClipboard function only copies 1 lineJavascript CopytoClipboard 函数只复制 1 行
【发布时间】：2023-03-24 12:33:01
【问题描述】：

所以我有一个 PHP 脚本，它将打印出一个项目列表，我想在其中添加一个按钮，将列表中的一个或多个项目复制到剪贴板。我发现了一个基本的 Javascript 函数（我对 JavaScript 顺便说一句我一无所知），它似乎工作得很好，但是如果我得到超过 2 行，则复制函数只会复制第一行，除了它工作得很好。这是代码。

if (isset($_POST['create'])){
    echo'<div class =" col-md-6 pull-right"><h3>Tokens you just generated below</h3><br>';
    if((isset($_POST['create']) && ($insert_token && $stmt->rowCount())) >0){
        foreach ($generatedtokens as $tokens){
            $ListTokens = ($tokens['token'].' - '.$tokens['desc'].'<br>');
            echo '<p id="tokens">'.nl2br($ListTokens).'</p>';
        }
        if (isset($_POST['create'])){
            ?>
            <button onclick="copyToClipboard('#tokens')" class ="btn btn-primary">Copy Tokens</button>
            <?php
            echo '</div>';
        }
    }
}
?>
<script>
    function copyToClipboard(element) {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).text()).select();
        document.execCommand("copy");
        $temp.remove();
    }
</script>

对不起，如果这里的格式错误，我总是很难使用空格，因为我通常只使用制表符。是的，所以只有第一行副本。

提前致谢。

【问题讨论】：

标签： javascript php

【解决方案1】：

您试图在所有 p 标记中使用相同的 id 获取元素值，因此它只是将一行复制到剪贴板。

function copyToClipboard(element) {
    var text =  '';
    $('#itemlist p').each(function() {
        text +=  '\r\n' + $(this).html() + '\r\n';
    });
    var input = document.createElement('textarea');
    input.value = text;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="dontcopy"> 
<p>Dup Item 1</p>
<p>Dup Item 2</p>
<p>Dup Item 3</p>
<p>Dup Item 4</p>
</div> 
<div id="itemlist"> 
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
</div> 
<button onclick="copyToClipboard();" class ="btn btn-primary">Copy Tokens</button>

感谢@Mr. 的输入。格林伍德兹

【讨论】：

我使用的是引导模板，所以使用 JQuery 应该没有问题，因为我相信它是内置的。我会试一试并告诉你。
似乎不适合我，使用 Jquery 3.2.1 ...我在一个简单的脚本标签中使用它，复制功能什么也不做。除了您在此处提供的代码之外，还有其他要求吗？
我工作，但从整个页面复制大部分文本。我尝试添加 div id，但它仍然复制了所有内容，哈哈。进展 :)
好像在复制所有的P标签
这是因为你用这一行选择了所有的 p 标签： var text = $('p').text();如果你这样做，它应该只适用于 itemlist 内的 p 标签： var text = $('#itemlist p').text();

【解决方案2】：

我已使用文本区域编辑了您发布的示例。现在换行符也被复制了。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

    <div id="items">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
        <p>Item 4</p>
    </div>

    <button onclick="copyToClipboard();" class ="btn btn-primary">Copy Tokens</button>
    <script>

    function copyToClipboard() 
    {
        var texts = [];
        var text = $('#items p')
        var txtarea = document.createElement('textarea');
        document.body.appendChild(txtarea);

        text.each(function(index, value)
        {
            txtarea.append(value.innerHTML + '\n');
        });

        txtarea.select();
        document.execCommand('copy');
        document.body.removeChild(txtarea);
    }

    </script>
</body>

【讨论】：

看起来不错。但是，我不希望显示文本区域。我已经尝试过了，但似乎即使在 textarea 中，每个标记之间也没有换行符......叹息......
我已经编辑了我的示例。现在这些项目首先被添加到一个文本区域，我在其中添加了一个中断 (\n)。之后，选择并复制文本区域并带有中断。复制后 textarea 被删除。
该死的我也去试试，另一个好用，所以我暂时保留它，早上太早了，我现在要睡觉了。谢谢朋友。
欢迎您；) 梦想着 textarea 和换行符玩得开心哈哈。 :)
不开玩笑，我想我确实做过梦。