Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Copy data from data-clipboard-text held in a separate element #874

Closed
jpxwb opened this issue Jul 9, 2024 · 1 comment
Closed

Copy data from data-clipboard-text held in a separate element #874

jpxwb opened this issue Jul 9, 2024 · 1 comment

Comments

@jpxwb
Copy link

jpxwb commented Jul 9, 2024

Hi,

Firstly, thank you for a very excellent solution!

Secondly, sorry for asking probably basic questions, but I could not work this out.

Basic Example

In this example, I am using Clipboard.js to copy text from the a element, copying the data held in the data-clipboard-text attribute.

That works fine as shown here:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<a class="copy_data" data-clipboard-text="that, that and the other">Copy</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('.copy_data');;

clipboard.on('success', function(e) {
	e.trigger.innerHTML = "Copied!"
	setTimeout(function() {
		e.trigger.innerHTML = "Copy"
	}, 1800);
	e.clearSelection();
});
</script>
</body>
</html>

My Issue

The issue I am struggling with is working out if it is possible to have the copy link still at the top of the page, but for the data that is copied to be defined against a separate element?

For example, instead of this:

<a class="copy_data" data-clipboard-text="that, that and the other">Copy</a>

Can I do this:

<a class="copy_data">Copy</a>

With the element containing the data to be copied further down the page - e.g.

<div data-clipboard-text="that, that and the other"></div>

This might seem like a silly request, but the reason I'm asking is that due to the way the pages are built where I'm using the copy functionality, the copy button needs to be at the top of the page, but at the point that the HTML is written for displaying the copy button, the content to copy has not been generated yet - it won't be generated until further down the page.

Therefore I thought if I could still hold the data to be held in the data-clipboard-text attribute, but still have the copy button at the top of the page, that would solve it.

However, I can't work out how to achieve that result using Clipboard.js. Ideally I would still like to use Clipboard.js for the copy functionality.

Docs: Copy text from another element

I have seen the "Copy text from another element" option from the clipboard.js site:

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

However, rather than copying the content from an input element or textarea for example, I wanted to copy the data from the data-clipboard-text attribute of a different element but I wasn't sure how to do that?

Thanks again
@jpxwb
Copy link
Author

jpxwb commented Jul 13, 2024

In case anyone else has the same question, I received an answer via Stack Overflow here:

https://stackoverflow.com/questions/78721729/clipboardjs-copy-data-from-data-clipboard-text-held-in-a-separate-element/78721812#78721812

@jpxwb jpxwb closed this as completed Jul 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jpxwb