It wasn’t that long ago where you couldn’t programmatically copy text to the clipboard from the web without using Flash. But it’s getting pretty well supported these days. IE 10+, Chrome 43+, Firefox 41+, and Opera 29+, says Matt Gaunt in writing about it on Google’s developer site.
Here’s the example from that article:
See the Pen Copy Text with a Button (Google Example) by Chris Coyier (@chriscoyier) on CodePen.
That article says it’s not supported in Safari, but it is as of Safari 10, which only dropped in September.
You don’t need a library to do this stuff, as evidenced by the above demo. But, there is one: clipboard.js. It’s only 3kb gzipped. The purpose is to give you a bit of a cleaner API to work with, like success and error events, and configuration through data-*
attributes. Here’s a demo of that:
See the Pen Simplest Possible Clipboard.js by Chris Coyier (@chriscoyier) on CodePen.
I’ve used it lately on production for copying phone numbers to clipboard when on “desktop”. I love direct call option on mobiles but it irritates me when trying to launch some weird-ass apps on desktop. I guess there is no way of detecting ability to make phonecalls?
Cool stuff, as always!
Note that the first demo doesn’t work in Edge due to some bug (https://mobile.twitter.com/simevidas/status/646570803929174016), so clipboard.js seems to be the only sensible option.
Whoa, that’s 14 months old! And they still haven’t fixed it?
Boy, they’re surely taking their time. I wonder what’s the holdup.
There are currently 23 features in development for Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/?q=edge%3A%27In%20Development%27, many of them big ones like service worker. They’re busy :)
Safari 10.0.2, works like a charm!