Javascript CopytoClipboard function only copies 1 line

Question

So I have a PHP script which will print out a list of items, I wanted to add a button on there which copies the one or more items in the list to the clipboard. I have found a basic Javascript function (I have no clue about JavaScript btw) that seems to work nicely, however if I get more than 2 lines, the copy function will only copy the first line, other than that it works great. Here is the code.

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>

Sorry if the formatting is wrong on here, I always have a hard time with spaces as I usually use tab only. Yea, so just that only first line copies.

Thanks in advanced.

Answer 1

You were trying to get element value with id being the same in all p tags so it was only copying one line to the clipboard.

 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>

Thanks for the input @Mr. Greenwoodz

Answer 2

I've edited the example you've posted using a textarea. Now the line breaks are also copied.

<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>

Javascript CopytoClipboard function only copies 1 line

Question

2 answers

solution1
4 ACCPTED 2017-10-04 07:48:19

solution2
2 2017-10-04 09:34:04

Javascript CopytoClipboard function only copies 1 line

Question

2 answers

solution1 4 ACCPTED 2017-10-04 07:48:19

solution2 2 2017-10-04 09:34:04

solution1
4 ACCPTED 2017-10-04 07:48:19

solution2
2 2017-10-04 09:34:04