Clipboard.js: [clipboardjs] Copy multiple target elements.

Created on 30 Sep 2016 · 5Comments · Source: zenorocha/clipboard.js

Is't possible coping multiple target elements?
Like, data-clipboard-target="#data-*"

Source

lovebdsobuj

Most helpful comment

You can't copy multiple target elements at once. But you can use the imperative API for that, for example:

new Clipboard('.btn', {
    text: function(trigger) {
        var a = document.querySelector('#a').value;
        var b = document.querySelector('#b').value;
        return a + b;
    }
});

zenorocha on 17 Oct 2016

👍4

All 5 comments

Make a test!

kafeltz on 30 Sep 2016

Simply it's not working.
Need a sample demo.

lovebdsobuj on 7 Oct 2016

You can't copy multiple target elements at once. But you can use the imperative API for that, for example:

new Clipboard('.btn', {
    text: function(trigger) {
        var a = document.querySelector('#a').value;
        var b = document.querySelector('#b').value;
        return a + b;
    }
});

zenorocha on 17 Oct 2016

👍4

I modified what he did, in order to use in multiple places...
pasting here if somebody need:

new Clipboard('.btn-copy-mutiple', {
        text: function (trigger) {
            var targets = $(trigger).data('clipboard-targets');
            targets = targets.split(',');
            var copyString = '';
            var qtd = targets.length;
            for (var i = 0; i < qtd; i++) {
                copyString += ' ' + $(targets[i]).text();
            }
            return copyString;
        }
    });

button:

<a class="btn-copy-mutiple btn" data-clipboard-targets="#chamado-id27558,#chamado-titulo27558"><i class="fa fa-copy"></i></a>

ps:
.text() or val(), depending on what you're going to copy

dayanneramos on 2 Feb 2018

👍2

I have generated a list of user emails (based on role) from WordPress. I'm trying to get a button on the page that will "copy all" emails. Thoughts on this?