Clipboard.js: Feature request: ajax / asynchronous text copy

Created on 10 Jun 2019 · 9Comments · Source: zenorocha/clipboard.js

This is not a bug report, but a feature request for a case that's not covered by the library.

In short, I get the text I need to copy from an ajax call, asynchronous, that can take some time to return. None of the methods I've seen in the documentation is good for this.

It would be great if the library had a function similar to this:

new ClipboardJS('.btn', {
    data: function(setData) {
       $.get('...', function (data) { setData(data.text_to_copy) }
    }
});

Source

DigitalLeaves

Most helpful comment

Thanks! That is actually a very useful example. However, I find that code definitely a lot convoluted for something as simple as copying a dynamically generated / asynchronous content. I would suggest a function like the one I described above as a wrapper for all that code. After all, a clipboard copy operation should not take that much code, especially with a great library such as clipboard.js

DigitalLeaves on 25 Dec 2019

👍2

All 9 comments

I think so too.

crazyQY on 17 Jun 2019

👍1

You can try to obtain the remote data first, and then perform the copy operation.

zhangchenglin on 21 Dec 2019

How? Can you put an example?

Ignacio Nieto Carvajal - Founder, senior developer, entrepreneur and nomad
Digital Leaves OÜ
Registry code: 14318562
DUNS number: 363002407
https://digitalleaves.com
[email protected]

This email and its attachments are confidential and may contain privileged information. They are exclusively addressed to its recipients. If you receive this in error or transmission, you are not allowed to use, print, copy, or disclose to any third party. Please, reply notifying immediately the sender and then delete it. You may incur in an infringement in case of non-compliance with the above. Digital Leaves OÜ with registry number 14318562, and DUNS number 363002407, registered office at Sepapaja 6 Tallinn 15551 Estonia, may process your email together with other information provided. The purpose is to manage or keep your contact details or the interactions we may have with you. The legal grounds to process your personal data may be based on consent, legitimate interest, performance of a contract or others.
On 21 Dec 2019, 07:02 +0100, 张成林 notifications@github.com, wrote:

You can try to obtain the remote data first, and then perform the copy operation.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

DigitalLeaves on 21 Dec 2019

https://codepen.io/zhangchenglin/project/editor/ZOpBym

This writing requires 2 clicks.
I think that in a software that is copied to the system (various systems) clipboard function, you should not add the remote access function, because other software has already done this function, the key function should be to pass the existing content to various System clipboard.

zhangchenglin on 24 Dec 2019

@zenorocha
Is there a better example

zhangchenglin on 24 Dec 2019

DigitalLeaves on 25 Dec 2019

👍2

Related #152

pagelab on 14 Feb 2020

Unfortunately this is a browser limitation. The good news is that browsers are working to improve this: https://w3c.github.io/clipboard-apis/

zenorocha on 29 Feb 2020

I implemented one using synchronous requests and event bubbling.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <div id="real_copy" data-clipboard-action="copy">
            <div id="show_copy">show</div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
        <script>
            const real = document.getElementById("real_copy");
            const show = document.getElementById("show_copy");
            const clipboard = new ClipboardJS(real);

            clipboard.on("success", function (e) {
                console.info("Action:", e.action);
                console.info("Text:", e.text);
                console.info("Trigger:", e.trigger);
                e.clearSelection();
            });

            clipboard.on("error", function (e) {
                console.error("Action:", e.action);
                console.error("Trigger:", e.trigger);
            });
            real.addEventListener(
                "click",
                () => {
                    console.log("real");
                },
                { capture: false }
            );
            show.addEventListener(
                "click",
                () => {
                    console.log("show");
                    const xhr = new XMLHttpRequest();
                    xhr.open("GET", "http://localhost:3000/", false);
                    xhr.onload = () => {
                        const data = JSON.parse(xhr.response).data;
                        clipboard.text = function () {
                            return data;
                        };
                    };
                    xhr.send();
                },
                { capture: false }
            );
        </script>
    </body>
</html>