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 `navigator.clipboard.writeText()` that works most of the time in most modern browsers.
// Note that:
// - 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: public domain
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

This comment has been minimized.

Copy link

@purezen purezen commented Aug 21, 2017

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

@lgarron

This comment has been minimized.

Copy link
Owner Author

@lgarron 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

This comment has been minimized.

Copy link

@bukzor 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

This comment has been minimized.

Copy link

@asumaran 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

This comment has been minimized.

Copy link

@Offirmo Offirmo commented Jun 4, 2019

Still not working in Safari latest = 12.1.1 at this time

@lgarron

This comment has been minimized.

Copy link
Owner Author

@lgarron 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

This comment has been minimized.

Copy link

@Offirmo 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

This comment has been minimized.

Copy link

@khamiltonuk 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
You can’t perform that action at this time.