Copy current URL to clipboard

Question

Not sure why this has been so difficult for me today, but for some reason I cannot seem to get it to copy the current URL to the clipboard. Overall, I'm looking for a way to do it without needing to create some hidden text elements.

This is what I'm trying so far:

var shareBtn = document.querySelector(".share-button");

shareBtn.addEventListener('click', function(event) {
  var cpLink = window.location.href;
  cpLink.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
  event.preventDefault;
});

When I try to go about it using the .select() I get this error: t.select is not a function So I'm not 100% sure what the best way to go about this. Again, without using jQuery (or any other JS library) and not using some sort of hidden textfield.

Answer 1

You can create a temporary DOM element to hold the URL

Unfortunately there is no standard API for clipboard operations, so we're left with the hacky way of using a HTML input element to fit our needs. The idea is to create an input, set its value to the URL of the current document, select its contents and execute copy.

We then clean up the mess instead of setting input to hidden and polluting the DOM.

var dummy = document.createElement('input'),
    text = window.location.href;

document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);

Answer 2

2021 update: you can use the Clipboard API like so:

navigator.clipboard.writeText(window.location.href);

Answer 3

ppajer's answer is indeed all that's needed when the browser handles the copying, without any custom handling of clipboard events being involved.

But if you or some library hook into the copy event (say, window.addEventListener('copy', ...) and then if that handler relies on using window.getSelection(), then a 19 year old Firefox issue will bite you. Like MDN says:

It is worth noting that currently getSelection() doesn't work on the content of <textarea> and <input> elements in Firefox, Edge (Legacy) and Internet Explorer.

So, getSelection() returns a non-null result after HTMLInputElement#select, but without providing the actual selected content. Easily fixed by using a non-input element to temporarily hold the URL:

function copyUrl() {
  if (!window.getSelection) {
    alert('Please copy the URL from the location bar.');
    return;
  }
  const dummy = document.createElement('p');
  dummy.textContent = window.location.href;
  document.body.appendChild(dummy);

  const range = document.createRange();
  range.setStartBefore(dummy);
  range.setEndAfter(dummy);

  const selection = window.getSelection();
  // First clear, in case the user already selected some other text
  selection.removeAllRanges();
  selection.addRange(range);

  document.execCommand('copy');
  document.body.removeChild(dummy);
}

(The above will also work when no custom handler hooks into the copy event.)

Answer 4

this might be one of the simpler ways to do it

window.navigator.clipboard.writeText(textToCopy);

Answer 5

var $temp = $("<input>");
var $url = $('.copy').attr('href');

  $('.clipboard').on('click', function() {
    $("body").append($temp);
    $temp.val($url).select();
    document.execCommand("copy");
    $temp.remove();
      const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        didOpen: (toast) => {
          toast.addEventListener('mouseenter', Swal.stopTimer)
          toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
      })
        
      Toast.fire({
        icon: 'success',
        title: 'URL copied! ' 
      })
          
})

Answer 6

I've had a pretty similar issue, where i needed to copy a link to a specific header element in my dom.

What i basically did was this:

1. Get Link as Url and as actual Link Element
2. Enable the native clipboard component to copy actual html
3. Copy the link to the header

Element.prototype.getLink = function () {
  let link = document.createElement("a");
  link.href = this.getUrl();
  link.innerText = this.innerText; 
  return link;
};

Element.prototype.getUrl = function () {
  return new URL(window.location.origin + window.location.pathname + '#' + this.id);
};

Clipboard.prototype.writeHTML = function (html, text) {
  let textContent = text || html.innerText;
  let htmlContent = "";
  if (typeof (html) == "string") htmlContent = html;
  else if (html instanceof Element) htmlContent = html.outerHTML;
  else htmlContent = html.toString();

  if (ClipboardItem) //bug in firefox : https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem
  {
    let content = [
      new ClipboardItem({
        "text/html": new Blob([htmlContent], { type: "text/html" }), //this can be interpreted by applications like teams or office word
        "text/plain": new Blob([textContent], { type: "text/plain" }) //while this is required for other apps, like plain text editors
      })
    ];
    return this.write(content);
  }
  else {
    return this.writeText(textContent);
  }
};

let header = document.getElementById("some-header");
let button = document.getElementById("copy-button");
let feedback = document.getElementById("feedback");
button.addEventListener("click", function(){
  navigator.clipboard
    .writeHTML(header.getLink(), header.getUrl())
    .then(function () {
      feedback.innerText = "copied!"; 
    })
    .catch((error) => {
      feedback.innerText = `Oops... that shoudln't have happened. ${error}`; 
    });
});

<h4 id="some-header">Some Header</h4>
<button id="copy-button" role="button">Copy URL to Header</button>
<div id="feedback">nothing copied yet</div>