Javascript CopytoClipboard 函数仅复制 1 行

Question

我有一个 PHP 脚本，它将打印出项目列表。我想在那里添加一个按钮，将列表中的一个或多个项目复制到剪贴板。我发现了一个基本的 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>

Answer 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. 的意见。格林伍德兹