Simple `navigator.clipboard.writeText()` polyfill.

copyToClipboard.html

<script>
// A minimal polyfill for copying text to clipboard that works most of the time in most capable browsers.
// Note that:
// - You may not need this. `navigator.clipboard.writeText()` works directly in all modern browsers as of 2020.
// - In Edge, this may call `resolve()` even if copying failed.
// - In Safari, this may fail if there is nothing selected on the page.
// See https://github.com/lgarron/clipboard-polyfill for a more robust solution.
//
// License for this Gist: public domain / Unlicense
function writeText(str) {
  return new Promise(function(resolve, reject) {
    var success = false;
    function listener(e) {
      e.clipboardData.setData("text/plain", str);
      e.preventDefault();
      success = true;
    }
    document.addEventListener("copy", listener);
    document.execCommand("copy");
    document.removeEventListener("copy", listener);
    success ? resolve(): reject();
  });
};
</script>

<button onclick="writeText(this.textContent)">Copy me!</button>

In document.addEventListener("copy",, copy should actually be click, right?

You need to intercept the copy event itself to set data on the clipboard.

Listening for click wouldn't help with copying (although you can certainly call copyToClipboard() from a click listener).

It would be better to make this MIT like clipboard-polyfill.

"public domain" isn't a license but rather a lack of copyright, which you still hold, like it or not. CC0 is the closest you can get to discharging your copyright in a way that's meaningful worldwide.

Doesn't work on Safari 12.0.1 (14606.2.104.1.1)

I get Unhandled Promise Rejection: undefined every time I click the button

Still not working in Safari latest = 12.1.1 at this time

Still not working in Safari latest = 12.1.1 at this time

In Safari, you need to have part of the document selected for this to work. :-/

A simple workaround is to do this:

<script>
// A minimal polyfill for `navigator.clipboard.writeText()` that works most of the time in most modern browsers.
// Note that on Edge this may call `resolve()` even if copying failed.
// See https://github.com/lgarron/clipboard-polyfill for a more robust solution.
// License: public domain
function writeText(str) {
  return new Promise(function(resolve, reject) {

    /********************************/
    var range = document.createRange();
    range.selectNodeContents(document.body);
    document.getSelection().addRange(range);
    /********************************/

    var success = false;
    function listener(e) {
      e.clipboardData.setData("text/plain", str);
      e.preventDefault();
      success = true;
    }
    document.addEventListener("copy", listener);
    document.execCommand("copy");
    document.removeEventListener("copy", listener);

    /********************************/
    document.getSelection().removeAllRanges();
    /********************************/

    success ? resolve(): reject();
  });
};
</script>

<button onclick="writeText(this.textContent, console.error)">Copy me!</button>

However, this adds a non-trivial amount of code to this "simple" snippet and clears the current selection every time in all browsers. I recommend a library if you want reliable logic in all browsers (this is why I maintain https://github.com/lgarron/clipboard-polyfill !).

Thanks. I just wanted to evaluate if this gist could be a lighter alternative to the full polyfill for just writing to the clipboard.

Doesn't work on Safari 12.0.1 (14606.2.104.1.1)

I get Unhandled Promise Rejection: undefined every time I click the button

I was getting the same error because I was on http and safari wants a https connection
https://portswigger.net/daily-swig/new-safari-clipboard-api-includes-additional-browser-security-privacy-mechanisms