Best possible ways to copy link

Question

I'm looking for a suitable way to copy URL (link) to the clipboard.

Can someone tell me how this can be achieved?

function copyURL() {      
  var elem = document.createElement("textarea");      
  document.body.appendChild(elem);      
  elem.value = google.com;      
  elem.select();      
  document.execCommand("copy");      
  document.body.removeChild(elem);      
  document.write("Copied to clipboard!");
}

<a href="javascript:void(1);" onclick="copyURL()">Copy URL</a>

A more detailed question with your requirements would allow others to help you a little more - for example, include your comments (that you wrote on answers below) about it needing to be 'on click', needing a success message, etc. — coops, May 30 '19 at 12:56

Paulo Campez · Answer 1 · 2019-05-30T12:35:04.980

0

You can use

document.execCommand("copy");

Fiddle: Fiddle

edited May 30 '19 at 12:35

answered May 30 '19 at 12:32

Paulo Campez

702
1
8
24

any example please? – BillNathan May 30 '19 at 12:33
Can I not do it on a hyperlink? Like I click on the hyperlink and it copies the value at the back with a message. Copied to cllipboard? – BillNathan May 30 '19 at 12:36

Kobe · Answer 2 · 2019-05-30T12:51:06.637

0

You can use window.location.href and .execCommand on a hidden textarea:

var url = document.getElementById('url')
url.value = location.href
url.select()
document.execCommand("copy");

Not hidden for example:<br>
<textarea id="url"></textarea>

edited May 30 '19 at 12:51

answered May 30 '19 at 12:35

Kobe

6,226
1
14
35

Jack Bashford · Answer 3 · 2019-05-30T13:40:17.730

0

Try making a dummy input, copying it, then removing it.

function copyURL() {      
  var elem = document.createElement("textarea");      
  document.body.appendChild(elem);      
  elem.value = location.href;      
  elem.select();      
  document.execCommand("copy");      
  document.body.removeChild(elem);      
  document.write("Copied to clipboard!");
}

<button onclick="copyURL()">Copy URL</button>

edited May 30 '19 at 13:40

answered May 30 '19 at 12:35

Jack Bashford

43,180
11
50
79

Why does it open a paste box? Can it just not say, copied to the clipboard? – BillNathan May 30 '19 at 12:40
@BillNathan It's so you can make sure it worked by pasting it into the prompt. – Jack Bashford May 30 '19 at 12:42
Can you remove it? I can try and paste somewhere else? Just show a message saying. Copied to clipboard, please? – BillNathan May 30 '19 at 13:39
No problem @BillNathan. – Jack Bashford May 30 '19 at 13:40
Edited @BillNathan, any better? – Jack Bashford May 30 '19 at 13:41
Two things. Can this button be an anchor link? And what if I want to set the link of my choice instead of current URL? – BillNathan May 30 '19 at 13:44
Just change the `location.href` to whatever link you want. – Jack Bashford May 30 '19 at 13:51
What about changing it from button to anchor link? – BillNathan May 30 '19 at 13:52
Just change the tag type - from ` – Jack Bashford May 30 '19 at 13:53
I have made an edit to my question and added snippet. It doesn't work can you check? – BillNathan May 30 '19 at 13:56

Best possible ways to copy link

3 Answers3