Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple `navigator.clipboard.writeText()` polyfill.
<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>
@purezen
Copy link

purezen commented Aug 21, 2017

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

@lgarron
Copy link
Author

lgarron commented Oct 8, 2017

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).

@bukzor
Copy link

bukzor commented Nov 4, 2018

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.

@asumaran
Copy link

asumaran commented Nov 29, 2018

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

@Offirmo
Copy link

Offirmo commented Jun 4, 2019

Still not working in Safari latest = 12.1.1 at this time

@lgarron
Copy link
Author

lgarron commented Jun 4, 2019

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 !).

@Offirmo
Copy link

Offirmo commented Jun 4, 2019

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

@khamiltonuk
Copy link

khamiltonuk commented Oct 16, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment