3

CanIUse.com shows that all major browsers have at least partial Clipboard API support while FF has full support: https://caniuse.com/#feat=clipboard

However, I cannot find any tutorials or simple examples of how to write to the clipboard using HTML5 (no flash).

Does anyone know what exactly partial support means, is this feature usable? If it only worked in Chrome/FF that would be sufficient for my needs.

Krisztián Balla
  • 15,886
  • 11
  • 58
  • 69
asutherland
  • 2,493
  • 3
  • 26
  • 47
  • Possible duplicate of [event.clipboardData.setData in copy event](https://stackoverflow.com/questions/36270886/event-clipboarddata-setdata-in-copy-event) – Nickolay Jan 01 '18 at 16:00

1 Answers1

3

I recently did an intense research on the W3C Clipboard API (which is up to this writing still in the working draft stage) support in the following browsers (latest versions):

  1. Internet Explorer
  2. Edge
  3. Google Chrome
  4. Firefox

Chrome and Firefox both support the W3C Clipboard API. You can read and write data to the clipboard using the getData and setData methods: https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData

You can set data in different MIME types (even custom ones). Although anything different from text/plain and text/html won't be readable in other browsers, only the one you set the data in.

Edge supports the W3C Clipboard API with the restriction that you can only write data with the MIME type text/plain (or text). Anything else is going to throw an exception. But there is a hack using a contenteditable div with which you can write data with the text/html MIME type too.

The hack can be found here: https://stackoverflow.com/a/30905277/434742 (look for "UPDATE: COPY KEEPING THE TEXT FORMAT" in the answer)

Internet Explorer does not support the W3C Clipboard API. There is a custom implementation available though. But even that has the same restriction as Edge meaning you can only write data with the MIME type text/plain (or text). But the hack for Edge above also works for Internet Explorer. Moreover you can also only read data with the MIME type text/plain (or text). But there is another hack using a contenteditable div with which you can read data with the text/html MIME type too.

The hack can be found here: https://stackoverflow.com/a/6804718/434742 (look for "Solution #2" in the answer)

TL;DR: You can copy and paste text including formatting (HTML) in all browsers mentioned above. Some workarounds are needed for Edge and especially Internet Explorer though.

Krisztián Balla
  • 15,886
  • 11
  • 58
  • 69
  • FYI: Answer udpated. Edge now supports reading data with MIME-Type `text/html` from the clipboard. In the past an attempt to so, would throw an exception. – Krisztián Balla Jan 11 '18 at 13:22