Javascript CopytoClipboard function only copies 1 line

Question

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 that seems to work nicely.

However if I get more than 2 lines, the copy function will only copy the first line. How can I do this correctly?

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>

3gth · Accepted Answer · 2017-10-04T10:19:20.040

4

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

edited Oct 04 '17 at 10:19

answered Oct 04 '17 at 07:48

3gth

550
5
23

I'm using a bootstrap template so I should have no problem using JQuery as I believe it is built in. I will give it a shot and let you know. – John Martin Oct 04 '17 at 07:51
Seems to not be working for me, using Jquery 3.2.1 ... I have used it in a simple script tag, the copy function just does nothing. IS there anything else required but what code you have supplied here? – John Martin Oct 04 '17 at 08:24
I works, but copies most of the text from the whole page. I tried to add the div id and it still copied everything lol. Progress tho :) – John Martin Oct 04 '17 at 09:10
seems to be copying all P tags – John Martin Oct 04 '17 at 09:11
1

It's because you are selecting all the p tags with this line: var text = $('p').text(); If you do this instead it should work for only the p tags inside of the itemlist: var text = $('#itemlist p').text(); – Mr. Greenwoodz Oct 04 '17 at 09:12
@Mr.Greenwoodz - Perfect. – John Martin Oct 04 '17 at 09:16
Is there a way to make sure it copies the line breaks? It is one long line when I paste it. – John Martin Oct 04 '17 at 09:18
I did a quick search and found this: https://stackoverflow.com/questions/42816349/copy-button-preserving-line-breaks – Mr. Greenwoodz Oct 04 '17 at 09:21
Interesting.. The input type does not preserve, but when I change to it breaks the whole function. :,( – John Martin Oct 04 '17 at 09:27
Posted an answer using a textarea in the function;) – Mr. Greenwoodz Oct 04 '17 at 09:34
This solution seems to be closest to the final goal, just need to get those linebreaks passed over without displaying a on the page, I would do it, but I'm pretty sure the hidden option does not work on it. – John Martin Oct 04 '17 at 10:04
Like a Boss! :) – John Martin Oct 04 '17 at 10:32
I used this instead `text += '\r\n' + $(this).html();` It works and reduces the extra empty line between each. This has been fun, thanks again! :) – John Martin Oct 04 '17 at 10:41
glad i could help @JohnMartin – 3gth Oct 04 '17 at 10:59

Mr. Greenwoodz · Answer 2 · 2017-10-04T10:51:14.513

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>

edited Oct 04 '17 at 10:51

answered Oct 04 '17 at 09:34

Mr. Greenwoodz

255
1
11

Looks good. I'm not looking to display a textarea however. I have tried it, but seems that even while in the textarea there is no line breaks between each token...sigh.. – John Martin Oct 04 '17 at 09:43
Ive edited my example. Now the items are first added to a textarea and in which i added a break (\n). After that the textarea is selected and copied with breaks. After being copied the textarea is removed. – Mr. Greenwoodz Oct 04 '17 at 10:53
Damn I will try it too, the other one works so I will keep that for now, it is too early in the morn, I need to sleep now. Thanks buddy. – John Martin Oct 04 '17 at 11:00
Your welcome;) Have fun dreaming about textarea's and line breaks haha. : ) – Mr. Greenwoodz Oct 04 '17 at 11:05
No kidding lmao, I think I did dream about it. – John Martin Oct 05 '17 at 03:13

Javascript CopytoClipboard function only copies 1 line

2 Answers2