4

I got stucked in implementing this feature on my web application. All the other possibilities are mostly by using flash content. Could someone explain how I can achieve it by using plain javascript or by Dojo.

Cédric Boivin
  • 10,854
  • 13
  • 57
  • 98
Raghuram
  • 89
  • 1
  • 2
  • 9
  • Which browsers would you like to support? – demee May 13 '13 at 16:30
  • 2
    Flash is commonly used because you cannot use JavaScript to reliably copy to the users clipboard; http://stackoverflow.com/questions/14460210/copy-to-clipboard-not-working-in-ff-chrome – Alex K. May 13 '13 at 16:31
  • @SlawomirDemichowicz I am looking for cross browser solution. I come to know that there is a solution in IE – Raghuram May 13 '13 at 16:44
  • Possible duplicate of http://stackoverflow.com/questions/127040/copy-put-text-on-the-clipboard-with-firefox-safari-and-chrome? – sixFingers May 13 '13 at 17:35
  • @Raghuram there is now a better way. See my answer. – Willem Mulder Sep 08 '20 at 10:54

5 Answers5

5

I have been working on the exact same issue for a while. For me flash isn't a viable solution so I came up with this simple work around:

<button onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','copy me')">Click to Copy</button>

It requires some extra work on the users end but at least it doesn't require flash or external libraries.

example fiddle

caffeinated.tech
  • 6,428
  • 1
  • 21
  • 40
  • Thanks @LcLk. Although it does not manipulate clipboard data. I achieved my functionality to display data that users can copy to their clip board. – Raghuram May 16 '13 at 18:58
4

Wanted to implement the same feature. Ended up using https://clipboardjs.com.

new Clipboard('.btn', {
  text: function() {
    return window.location.href;
  }
});

Works well

frank
  • 41
  • 1
3

Html 

<a class="" data-toggle="tooltip" data-placement="top" title="Copy profile Link" onclick="copy_to_clipboard('<%=public_profile_url(user.public_id)%>')">
<i class="fa fa-copy"></i>

Css

#url_public_id{
  display: none;
}

JS

function copy_to_clipboard(link) {
    $("#url_public_id").show()
    var Url = document.getElementById("url_public_id");
    Url.select();
    document.execCommand("copy");
    $("#url_public_id").hide()
    alert("Copied URL ");
}
aydow
  • 3,673
  • 2
  • 23
  • 40
Soumitra Sarkar
  • 610
  • 6
  • 9
0

It has been a long time, but this now works:

document.execCommand('copy');

Which copies the currently selected text to the clipboard. If you want to copy a specific text using javascript, you would have to create a fake input element in the DOM, then do the following

let element = document.getElementById('yourID');
element.value = 'yourText';
element.select();
element.setSelectionRange(0, element.value.length);
document.execCommand('copy');
Willem Mulder
  • 12,974
  • 3
  • 37
  • 62
  • Not only is `document.execCommand()` now deprecated, but a more complete solution using it was posted all the way back in 2018. – Hashim Aziz Jun 13 '22 at 18:14
0

check my code it's working

static getFileUrl(id){
    var url=new URL("http://localhost:3000/FileUrl")
    url.searchParams.append('id',id)
    return url.href
}
static copyFileUrl(id){
    copy(this.getFileUrl(id))
}
KOWSIK R
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 07 '21 at 08:28