Copying permalink by using javascript

Question

My website's url is http://localhost:4200/reader-main. I want that to be copied when an anchor link is clicked. That copied link can be pasted anywhere.
Code:
HTML:

<div class="row permalink">
      <a id="copyPermalink" class="copyLink" href="" (click)="copyToClipboard($event)" aria-label="Copy Permalink">Copy Permalink</a>
    </div>

Javascript:

copyToClipboard(event: any): void {
    const copyUrl = document.querySelector('copyLink');
    window.getSelection();
    try {
      const successful = document.execCommand('copy');
      const message = successful ? 'Successful' : 'Unsuccessful';
      console.log(copyUrl);
      alert(message);
    } catch (err) {
      console.log('Not able to copy', err);
    }
    return false;
  }

But in above code, console.log(copyurl) returns null. And URL isn't being copied. How to fix that?

Does this answer help you? https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript — teoML, Dec 11 '19 at 09:45
You can try this - https://stackoverflow.com/questions/40958613/how-to-copy-url-on-button-click — Allabakash, Dec 11 '19 at 09:51

Ivan86 · Accepted Answer · 2019-12-12T05:20:08.253

2

You can add an event listener to all anchor tags on the page and attach the click event to the function copyToClipboard().

let a = document.querySelectorAll("a");

for (let i = 0; i < a.length; i++) {
  a[i].addEventListener("click", function(e) {
    e.preventDefault();
    copyToClipboard(this);
  });
}

function copyToClipboard(anchor) {
  try {
    let input = document.createElement('input');
    input.type = "text";
    input.setAttribute("value", window.location.href);
    input.id = "test";
    document.body.appendChild(input);
    
    let inputEl = document.getElementById("test");
    inputEl.focus();
    inputEl.setSelectionRange(0, inputEl.value.length);
    
    const successful = document.execCommand('copy');
    document.body.removeChild(inputEl);

    const message = successful ? 'Successful' : 'Unsuccessful';
    console.log(anchor);
    alert(message);
    console.log(window.location.href);
  } catch (err) {
    console.log('Not able to copy', err);
  }
}

<div class="row permalink">
  <a id="copyPermalink" class="copyLink" href="" aria-label="Copy Permalink">Copy Permalink</a>
</div>

But in above code, console.log(copyurl) returns null. And URL isn't being copied. How to fix that?

You were missing a . at .copyLink in this instruction const copyUrl = document.querySelector('copyLink');

edited Dec 12 '19 at 05:20

answered Dec 11 '19 at 09:54

Ivan86

5,695
2
14
30

I've edited your answer. `input.getSelection` isn't a function. And url doesn't get copied... – Ajay Kulkarni Dec 12 '19 at 04:47
@AjayKulkarni See one of my previous answer https://stackoverflow.com/questions/59261438/copy-button-functionality/59261655#59261655 . There the input element exists, here I am creating it. But I still can't figure out what is wrong. Give me a few sec. – Ivan86 Dec 12 '19 at 04:50
Here is my modified code... https://jsfiddle.net/qxzuc806/... Link doesn't get copied in my code either – Ajay Kulkarni Dec 12 '19 at 05:03
@AjayKulkarni Strange thing is that my answer from link above works fine. – Ivan86 Dec 12 '19 at 05:06
But it doesn't work in my case, please check my modified code in jsfiddle – Ajay Kulkarni Dec 12 '19 at 05:07
@AjayKulkarni I got it! Ok, try it out please. – Ivan86 Dec 12 '19 at 05:16
It works, but has to be modified a bit for my requirements... Thank you – Ajay Kulkarni Dec 12 '19 at 05:27
@AjayKulkarni what do you mean? It copies the URL. You can see the output of `window.location.href` when you click the link, it's the last line in the console. And you will see that it copies the correct URL: because the snippet is embeded (an iframe) – Ivan86 Dec 12 '19 at 05:30
Yeah... I've some requirements here, I'll modify your code accordingly. I've accepted your answer. Thank you – Ajay Kulkarni Dec 12 '19 at 06:05
@AjayKulkarni Thanks, I'm happy we finally got it. So the concolusion is: you cannot focus the URL area (security reasons) but you can obtain the URL, create an input element and give it that value(URL) then focus and select that element, copy and remove the element. – Ivan86 Dec 12 '19 at 06:10

Copying permalink by using javascript

1 Answers1