Forgive me if I misspelled it and please correct it.
See this link for W3 try it: (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2)
The W3 copies value an input, but I want to copy the data-xxx of an element.
I want to copy what is inside the data-copy-short-link using JavaScript or jQuery.
Which JavaScript or jQuery function should I use to copy this text into the data?
My English is very poor. So I could not use any more questions. But I understand the coding. Please explain to me by writing the code and simple sentences, and do not say that there is an answer to your question.
// js
$("div").click(function() {
let shortLink = $(this).attr("data-copy-short-link");
shortLink.select();
shortLink.setSelectionRange(0, 99999);
navigator.clipboard.writeText(shortLink.value);
});
<div data-copy-short-link="http://example.com/xxx"></div>
First of all, you don't need access data-* attribute directly, you can access it via element.dataset.* property instead.
Second, you don't need any text selecting as per example, you can do it directly:
$("div").click(function() {
navigator.clipboard.writeText(this.dataset.copyShortLink);
});
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
Also note in Firefox:
Writing to the clipboard is available without permission in secure contexts and browser extensions, but only from user-initiated event callbacks. Browser extensions with the "clipboardWrite" permission can write to the clipboard at any time.
This script creates a textarea allowing JS to copy the string and then removes it. The user never sees any of these things, all is executed in the hidden.
$("div").click(function () {
let shortLink = $(this).attr("data-copy-short-link");
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = shortLink;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
You can create textarea and put text into it and then run copy command:
$("div").click(function () {
let shortLink = $(this).attr("data-copy-short-link");
var textArea = document.createElement("textarea");
textArea.value = shortLink;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-copy-short-link="http://example.com/xxx">click to copy</div>
<br />
<input type="text" placeholder="paste me to test">