CODEWITHSUNDEEP
javascriptjquery
mordad
mordad

Reputation: 139

copy text data-xxx to clipboard using js

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>

Upvotes: 2

Views: 295

Answers (3)

Gass
Gass

Reputation: 9392

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);

}

Upvotes: 2

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9953

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">

Upvotes: 1

vanowm
vanowm

Reputation: 10221

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.

Upvotes: 4

Related Questions