Clipboard.js: Unable to copy the hidden table to clipboard

Created on 21 Jun 2018  路  4Comments  路  Source: zenorocha/clipboard.js 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target-textarea</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 1. Define some markup -->
    <textarea id="bar">hello</textarea>

    <table id="table" style="display: none;">
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Island Trading</td>
            <td>Helen Bennett</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>Laughing Bacchus Winecellars</td>
            <td>Yoshi Tannamuri</td>
            <td>Canada</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Giovanni Rovelli</td>
            <td>Italy</td>
        </tr>
    </table>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#table">copy</button>

    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new ClipboardJS('.btn');
    console.log(clipboard);

    clipboard.on('success', function(e) {
        debugger;
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

If i keep the table visible then it can easily copy to clipboard but not the hidden table

picture maheshnarke

Most helpful comment

Same problem too :(

My solution is
style="opacity:0;position:absolute;z-index:-1"

picture harkor on 28 Jul 2018
👍5 ❤2

All 4 comments

I have the same problem with hidden textarea. Is there a solution?

catherinek picture catherinek on 13 Jul 2018
👍1

Same problem too :(

My solution is
style="opacity:0;position:absolute;z-index:-1"

harkor picture harkor on 28 Jul 2018
👍5 ❤2

It looks like the copy functionality needs to copy data that can be selectable and selectable means visible, I already gone through this and it only copies content from visible tags, so the solution provided by @harkor is more than excellent. I have created a class with those CSS properties and assigned it to elements that needs to hold data that could later be copied and it works great. I know it is a problem patching solution but still viable and not a bad thing at all.

Sparker73 picture Sparker73 on 25 Sep 2018
👍1

I work around this too by wrapping what I want to copy in a div that has 

copy_div.style.position = 'absolute';
copy_div.style.left = '-99999px';

I create the div, copy the elements I want to it, copy it to the copy/paste buffer then destroy the div.

bernd-wechner picture bernd-wechner on 4 Feb 2019
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dweepcan picture dweepcan  路  3Comments
aussiechief picture aussiechief  路  3Comments
godoffrags picture godoffrags  路  4Comments
bravo14 picture bravo14  路  3Comments
seanrco picture seanrco  路  4Comments